HTML5 scoped styles on parent (scoping) element

Question

I'm reading through the HTML5 specification and for the scoped attribute on the style elements, it specifies:

The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.

A style sheet declared by a style element that has a scoped attribute and has a parent node that is an element is scoped, with the scoping element being the style element's parent element.

I'm trying to determine whether the scoping element can be accessed through the scoped style sheet, or just the children nodes of the subtree of the scoping element.

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 scoping element. Also, "Another section here" was not red, so therefore the style only applied to the scoping element.

Can someone confirm if this behaviour is in accordance to the specification or a bug in Mozilla's implementation?

Answer 1

The HTML 5.0 specification doesn't 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 just for the subtree rooted at the style element's parent element, as opposed to the whole 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 style color:red; is applied to it.

So, on this example, the the Mozilla implementation is conform with the standard.