So many great encapsulation strategies, so little time!

<style>
p {
color: blue;
font-size: 2rem;
}
</style>

<my-el>
<style>
@Scope {
:scope {
&, * {
all: revert-layer;
color: red;
}
}
}
</style>
<p>This text is red & small!</p>
</my-el>

<my-el>
<template shadowrootmode="open">
<style>
* {
color: red;
}
</style>
<p>This text is red & small!</p>
</template>
</my-el>

https://codepen.io/Westbrook/pen/vYMgOyZ?editors=1000

#CSSScope #shadowDOM #declarativeShadowDOM #webDev

It appears Webkit has enabled @scope support in their stable branch. It may appear in the next version of tech preview...? 👀

https://github.com/WebKit/WebKit/pull/21435

#css #CSSScope

#Development #Techniques
CSS @Scope · The novel way to keep component styles contained https://ilo.im/15xfo1

_____
#WebDev #Frontend #CSS #CssCascade #CssSpecificity #CssScope

#Development #Introductions
Limit the reach of your CSS selectors with ‘@Scope’ · A way to select elements only within a subtree of your DOM https://ilo.im/15b1hq

_____
#WebDev #Frontend #CSS #CssScope #DOM #Demos

#Development #Reviews
Scope vs. Shadow DOM · A justification for a much-needed CSS feature https://ilo.im/14xlyj

_____
#WebDev #Frontend #CssScope #ShadowDOM #WebComponents #HTML #CSS #JavaScript

#Development #Previews
A quick introduction to CSS @Scope · An upcoming way to scope the reach of your CSS selectors https://ilo.im/14wr7j

_____
#WebDev #Frontend #CSS #CssCascade #CssScope #Chrome