Scoping Parenting HTML5 Styles

Question

I am reading the HTML5 specification and for the scoped attribute of style elements, it points out:

The scoped attribute is a boolean attribute. If present, it indicates that the styles are only for the subtree root in the parent element of the style element, unlike the entire Document .

A stylesheet declared by a style element that has a scoped attribute and has a parent element node, which is an element, the scope is the element of the style element.

I am trying to determine if a scope element is accessible through a sliding stylesheet or only the child nodes of the subview tree of the item.

I copied this example from MDN and modified it a bit:

 <article> <div>The scoped attribute allows for you to include style elements mid-document. Inside rules only apply to the parent element.</div> <p>This text should be black. If it is red your browser does not support the scoped attribute.</p> <section> <style scoped> section { color: red; } </style> <p>This should be red.</p> </section> <section> <p>Another section here</p> </section> </article> 

When I ran the example in a supporting browser (only Firefox at this time), the text This should be red is still red. However, there are no section elements as children of the browse element. In addition, “Another section here” was not red, so the style only applies to an element of the scope.

Can anyone confirm if this behavior complies with the specification or an error in the Mozilla implementation?

Answer 1

The HTML 5.0 specification does not define any scoped attribute. But the HTML 5.1 specification says:

The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended only for a subtree rooted in the parent element of the style element, unlike the entire document.

In your case, the root of the subtree is the <section> element containing the <style> element. The root is part of the tree, and the color:red; style is applied to it color:red; .

So, in this example, the Mozilla implementation is compliant.