Hacker News new | ask | show | jobs
by SynnVoid 610 days ago
For now, as Firefox support is not yet good, We can use nested rules in CSS. HTML:

<my-custom-element> <p>This is a paragraph</p> </my-custom-element>

CSS:

my-custom-element { p { color: blue; } }

By choosing a unique name for the custom element, we achieve near the same functionality as @scope.

2 comments

Svelte does a similar thing: when a component is compiled, it gets a scope class, and its own styles are placed in that scope.
Is this not the same as having a class with a unique name, and applying it to a parent div
Quite the same if you use nested css on the div.class-name-here. The diff is in the semantic. My post was about using nested CSS to "emulate" @scope