-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scoping class is not being applied in Svelte v5 #11565
Comments
By the way, the workaround is easy, I suppose: div.grid-row {
display: flex;
flex-direction: row;
gap: $tableGap;
padding: 0.2em 0em;
&.row-highlight {
&:hover, &.hover {
background-color: rgba(0, 0, 0, var(--wjg-rowhightlight-bg-opacity));
div.grid-cell-bg.sticky-data > :global(div.grid-cell) { // WORKAROUND: USING :global()
background-color: rgba(0, 0, 0, var(--wjg-rowhightlight-bg-opacity));
}
}
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Ok, this is going to be difficult for me because I'm not front-end dev. Maybe the bug is not a bug but an error on my side. The summary: In SveteKit [email protected], I use a CSS class named
grid-cell
that doesn't have "explicit" setting in the script's style tag, but it is used in a very specific selector:div.grid.row.row-highlight:hover div.grid-cell-bg.sticky-data > div.grid-cell
. There it is. Apparently, this usage is not enough for Svelte to add the scoping class to those DIV's. The structure is: div.grid-container > div.grid > div.grid-body > div.grid-row-bg > div.grid-row > div.grid-cell-bg > div.grid-cell. That's the markup the component specifies. That last DIV, when inspected in the browser, doesn't have the scoping class.Just in case it isn't clear: The compiled CSS adds the scoping class to the big selector above. If I inspect the div.grid-cell element and manually add the scoping class, then the style is applied.
Reproduction
I currently cannot sit down to make a small repro, so I figured I should post the entire component. It is a bit over 200 lines (not much, right?). It is a table component made out of DIV's.
Logs
No response
System Info
Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: