css - div - Estilos con ámbito HTML5 en elemento principal(scoping)

html title attribute

Question

Estoy leyendo la especificación de HTML5 y para el atributo de scoped en los elementos de style , especifica:

El atributo de scoped es un atributo booleano. Si está presente, indica que los estilos están destinados solo para el subárbol enraizado en el elemento principal del elemento de estilo, a diferencia de todo el Document .

Una hoja de estilo declarada por un elemento de style que tiene un atributo de scoped y tiene un nodo principal que es un elemento tiene un ámbito, y el elemento de ámbito es el elemento principal del elemento de estilo.

Estoy intentando determinar si se puede acceder al elemento de ámbito a través de la hoja de estilos de ámbito, o solo a los nodos secundarios del subárbol del elemento de ámbito.

Copié este ejemplo de MDN y lo modifiqué un poco:

<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>

Cuando ejecuté el ejemplo en un navegador compatible (solo Firefox en este momento), el texto This should be red sigue siendo rojo. Sin embargo, no hay elementos de section como elementos secundarios del elemento de ámbito. Además, "Otra sección aquí" no era roja, por lo tanto, el estilo solo se aplica al elemento de ámbito.

¿Puede alguien confirmar si este comportamiento está de acuerdo con la especificación o un error en la implementación de Mozilla?

Answer 1

La especificación de HTML 5.0 no define ningún atributo de scoped . Pero la especificación HTML 5.1 dice:

El atributo de ámbito es un atributo booleano. Si está presente, indica que los estilos están destinados solo para el subárbol enraizado en el elemento principal del elemento de estilo, a diferencia de todo el documento.

En su caso, la raíz del subárbol es el elemento <section> que contiene el elemento <style> . La raíz es parte del árbol y el color:red; del estilo color:red; se aplica a ella.

Entonces, en este ejemplo, la implementación de Mozilla cumple con el estándar.