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>
It appears Webkit has enabled @scope support in their stable branch. It may appear in the next version of tech preview...? 👀
#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
#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
