We Keep Coding

Stimulus controller not registering CSS styles?

I'm using rails, tailwind, and stimulus together. The application also integrates hotwire, but I'm not sure how relevant that is. Most of the code was written by others, so I don't know what someone could have potentially introduced that could cause this result.
I have html similar to this
<div data-controller="modal" data-action="click->modal#doStuff" data-modal-target="myModal" class="block bg-red-500">
</div>
and a controller
import { Controller } from '#hotwired/stimulus`;
export default class extends Controller {
static targets = ['myModal']
doStuff(){
console.log(this.myModalTarget.style)
}
}
Visually, I can see a red background as expected
If I inspect the html, I can see the appropriate classes and css
but when I click on the div, it calls console.log this.myModalTarget.style and everything in the CSSStyleDeclaration object is empty strings, including display and backgroundColor
At first, I thought it might be a race condition thing. It doesn't fully make sense, but maybe for some reason the controller is getting the myModalTarget before the CSS changes are being applied on the initial page render. But then I modified the controller to this:
import { Controller } from '#hotwired/stimulus`;
export default class extends Controller {
static targets = ['myModal']
doStuff(){
console.log(this.myModalTarget.style)
this.myModalTarget.style.display = 'block'
}
}
After clicking on the div twice, it correctly applies the 'block' style to the div to the point where if I console.log(this.myModalTarget.style) I can see in the CSSStyleDeclaration object that display: block as I expected.
However, the value for backgroundColor is still showing as ""
The entire time, I can visually see a red background, but if I console.log(this.myModalTarget.style.backgroundColor) the result I get continues to be ""
I would think that if this were a race condition like the one I described, the backgroundColor details would be updated and show a value of "red" eventually.
Can anyone see an issue, or at least offer some ideas for what could possibly cause this to happen?
I feel like I've seen this behavior multiple times throughout this application, unfortunately and I haven't been able to figure out for the life of me why the behavior of things are the way they are.

You're confusing two very different things.
Element.style:
The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
And inherited CSS rules from CSS files or tags which are available through Window.getComputedStyle().
import { Controller } from '#hotwired/stimulus`;
export default class extends Controller {
static targets = ['myModal']
doStuff(){
console.log(window.getComputedStyle(myModalTarget).display)
this.myModalTarget.style.display = 'block'
}
}

Vue 2 - Styling HTML returned in a switch statement

I'm building a generic component supposed to receive various backend data. I wrote a switch. One condition is :
case 'Bases':
let bases = variant[tableName][colValue].map((base) => {
return `<div class="base b${base.strongestIndication}">${base.name}</div>`
})
return bases.join('')
I use v-html in my template, therefore in this case, we have 3 divs created, each with a class of "base" and then "b1", "b2", "b3". I can see on the webpage that these classes are properly set when I inspect the elements.
I've described in my style some rules for theses classes (mostly background-color, border-radius and so on), but they do not apply.
I'm guessing this might have something to do with the CSS being applied before these divs are created but I'm not sure of this.
What should I do to get these tags created by JS to be styled properly ?
(Also, I know using v-html can be dangerous, therefore if you have a better idea for this whole thing, I'm all ears)

There is no need to build the markup in component methods. Define it in template and bind the classes dynamically. Since you didn't post the api data structure, neither how you are using this snippet of code, I can only refactor the specific case.
<div
v-for="base in colValues"
:class="['base', `b${base.strongestIndication}`]">
{{base.name}}
</div>

Figured it out. For those wondering, switch statements returning html code aren't styled if the tag in your file is scoped. Unsure why, but removing scoped work. If you decide to do so, but unique class names, as these styles will spread all throughout the application !

Recreating HTML/CSS Behavior with Styled-Components

I have a fairly annoying problem using Styled-Components in a React app. The class names of the HTML elements are very important, as is the dynamism of styled-components (via props passing). So it's important that both are used.
tl;dr I want to use a classname in CSS (and not HTML) without having to create an empty component or something.
I have a class with a dynamic classname, let's stay "style-123", where "123" is dynamically changed via state and is important for parity with the current setup. (IMO, the dynamic nature of the classname is preventing a solution.) The "style-123" classname is used in other HTML elements, but it is not a component itself so should not show up as an HTML element.
I have a component ("ComponentA") that has a classname of "component-a". This component's HTML should looking like the following:
<div class="component-a">
HELLO
</div>
and its Styles (in Dev Tools) should look like this:
.style-123 .component-a {
margin-left: -2%;
}
where we now see the class ("style-123") added. This should be the final result.
The general structure of the HTML is along the lines of:
<div class="name-whatever style-123 another-classname">
<div>
<div class="component-a">
</div>
</div>
</div>
Problem
I do not seem to be able to isolate "component-a" as an HTML classname for "ComponentA" while applying CSS as .style-123 .component-a via styled-components. In order for the HTML to have an isolated classname, the component (JSX) would need to be:
<ComponentA className={'component-a'}/>
and the styled component:
const ComponentA = styled.div`
&.component-a {
color: red;
}
`
This is the only way I know how to link-up a component in JSX with its styled-component counterpart.
I cannot do:
<ComponentA className={'component-a'}/>
and the styled component:
const ComponentA = styled.div`
&.style-123 .component-a {
color: red;
}
`
as this won't apply the styling since there's a classname-mismatch.
I've tried many combinations of SASS, all the ampersands and arrows and pluses and etc., over the last few hours. I hope this is feasible via styled-components as I need to declare classnames and have classnames dynamic as well as the CSS attributes and values, all passed via props. If there is another solution that doesn't use styled-components but maintains this dynamism, I am open to that.
Thanks for the time.

Polymer `<custom-style>`: which line of code stops appending to DOM multiple imports of the same custom-style template module?

My project's upstream web components theme is implemented as <custom-style> elements link
I want to implement my document level overrides as a JS module (as in, avoid hardcoding into app index.html or equivalent), which on surface looks simple:
import '#vaadin/vaadin-lumo-styles/color.js';
const $template = document.createElement('template');
$template.innerHTML = `
<custom-style>
<style>
html,
:host {
--lumo-primary-color: red;
}
</style>
</custom-style>`;
document.head.appendChild($template.content);
QUESTION
Some web components used in the document also import original theme via import '#vaadin/vaadin-lumo-styles/color.js'.
I want my overrides to always cascade last (without !important hacks).
Do multiple later import '#vaadin/vaadin-lumo-styles/color.js'; calls have any potential to revert my CSS custom property overrides cascade?
Think:
original: --lumo-primary-color: hsl(214, 90%, 52%);
me: import original, override --lumo-primary-color: red;
later: can a later import of original "reset" cascade back to --lumo-primary-color: hsl(214, 90%, 52%);)?
ES6 import a file in multiple place, why the file loads once? seems to imply maybe not, but I'm struggling finding any documentation that explicitly states something one way or another about <custom-style>.
Perhaps https://github.com/Polymer/polymer/blob/v3.2.0/lib/elements/custom-style.js#L80 is the key?
GLITCH
https://glitch.com/edit/#!/roan-pizza?path=src/index.js seems to confirm repeated imports don't seem to cause a problem, but why? Is it purely due to ES6 module load caching, or is there something else to it?
EDIT drag-n-dropping <custom-style> elements around in browser inspector definitely has an effect on the cascade (colors change based on tag order), so at least loading order is confirmed to matter.

Tips: remove all for edit.
difference tags (of <custom-style>) by #id => <custom-style id="id01">.
save <custom-style> to edit => save(#id).
red (in "--lumo-primary-color") is a variable => var color = red.
remove all content of a <custom-style id="id01"> => remove_all(#id).
add a new content you need => as you did above.
I just hope that you will solve your problem. You are better than me so I will not write code.

Defining inline style in React, SyntaxError: Unexpected token

While trying to disable scrolling on the page setting style='overflow-y: auto;':
render() {
return (
<div style={{overflow-y: auto}}>
<div>{this.props.title}</div>
<div>{this.props.children}</div>
</div>
);
}
Webpack is giving an error:
What could I do here? If we can not set overflow-y for some reason, then how could we disable scrolling of a web page in React app (I am also using React-Bootstrap)

The style attributes should be in camel case according to the documentation.
So anywhere we delimit the words with hyphen (-) in normal css we should use change them to camel case when we use it inside a react style object.
For example.
overflow-y -> overflowY
overflow-x -> overflowX
background-image -> backgroundImage
We insert the styles as an object.
so the css properties will be attributes of an javascript object.
hyphen(-) is an illegal character when defining javascript object attributes or variable names. That's why it should be used in camel-Case.

From the comments, use overflowY.

You cannot use <div style={{overflow-y: auto}}>
You have to convert it into camelCase like <div style={{overflowY: auto}}>
For details you can Check react official document
Here https://reactjs.org/docs/dom-elements.html#style