An alternative to using VueJS
To limit the impact of CSS rules, you can contain them within a @scope at-rule. Keep in mind that this method may not apply if the styles are loaded through a
<link rel="stylesheet">
tag.
var style = mydiv.computedStyleMap()
console.log(
"border-color",
style.get("border-color").toString(),
"background-color",
style.get("background-color").toString(),
"font-weight",
style.get("font-weight").toString());
@scope (:root) to (#mydiv) {
body {
background-color: yellow;
font-weight: 700;
}
div {
background-color: rgb(0, 255, 0);
border: solid 1px red;
}
}
<div>Subject to CSS</div>
<div id="mydiv">Exempt from CSS</div>
<iframe src="https://httpbin.org/html"></iframe>
The <div id="mydiv"> element falls outside the scope of the CSS rules, resulting in no red border applied to it.
Furthermore, the background-color of <div id="mydiv"> remains transparent, allowing the yellow background color of the body to show through, instead of appearing green like the other <div>.
Although both <div> elements inherit the bold (700) font weight from the body, showing how CSS rules can impact elements differently despite scoping restrictions.
The concept of "shining through" and "inheritance" exemplify the ways CSS rules extend beyond their designated scope, showcasing the distinction between limiting rule application and its actual implications on elements.
When considering isolation, comparing the scenario with iframes presents a nuanced perspective:
- The "shining through" effect (background color) affects both
<div id="mydiv"> and iframes.
- "Inheritance" behavior (font weight) influences
<div id="mydiv">, but not iframes.