I've been delving into the details of the HTML5 specification, specifically regarding the scoped attribute on style elements. According to the specification:
The
scopedattribute is a boolean attribute. When used, it signifies that the styles are meant for the subtree rooted at the parent element of thestyleelement, rather than the wholeDocument.A style sheet declared by a
styleelement with ascopedattribute and a parent node which is an element is scoped, where the scoping element is the parent element of thestyleelement.
I am curious about whether the scoping element can be accessed through the scoped style sheet, or solely the child nodes of the subtree of the scoping element.
I took inspiration from MDN's example found here and made some modifications:
<article>
<div>The scoped attribute allows you include style elements within your document. Rules inside apply only to the parent element.</div>
<p>This text should display in black. If it's red, your browser doesn't support the scoped attribute.</p>
<section>
<style scoped>
section {
color: red;
}
</style>
<p>This text should be displayed in red.</p>
</section>
<section>
<p>Another section here</p>
</section>
</article>
After running this example in a supportive browser (only Firefox currently), I noticed that the text This should be red remained red. However, as there were no section elements as children of the scoping element, "Another section here" did not turn red. This suggests that the style was applied solely to the scoping element.
Can anyone verify if this behavior aligns with the specification, or if it may be a bug in Mozilla's implementation?