-
Framework "scoped" styles are often achieved by assigning a selector to each "component", and applying it to every element in that components template - but not elements that come from nested templates. That selector can look various ways, but basically:On twitter.com
❤️ 9 Favorites Mood 0
-
<article-component data-scope='article'> <h2 data-scope='article'>...</h2> <sub-component data-scope='article' data-scope='sub'> <!-- internals of sub only have scope='sub' --> </sub-component> <footer data-scope='article'>…</footer> </article-component>Permalink On twitter.com
-
Then that same selector is appended to all styles in the component stylesheet:Permalink On twitter.com
article {}➡article[data-scope=article] {}h2 {}➡h2[data-scope=article] {}footer {}➡footer[data-scope=article] {}Nothing magic. You can use this approach anywhere in CSS. -
you can even decide if you want to scope to the component pattern generally, or a specific instance of it: <article data-scope="article instance-id">Permalink On twitter.com
h2[data-scope~=article] { /* all instances */ }h2[data-scope~=instance-id] { /* unique instance */ }