css - attribute - style html
¿La sombra DOM reemplaza:: antes y:: después? (2)
Autor de especificación de alcance de CSS aquí.
La respuesta es en realidad, oficialmente ... indefinida!
No pensé en esta interacción cuando estaba escribiendo la especificación de alcance. Enviaré un correo electrónico a la lista y lo resolveremos. Es casi seguro que nos conformaremos con lo que hagan los navegadores actualmente (que parece estar permitiendo: antes / después del trabajo "como se esperaba", incluso en hosts de sombra).
Edición: la respuesta del Grupo de trabajo fue unánime: el comportamiento de implementación actual (:: antes / después de trabajar en hosts de sombra) es como debería ser. Lo editaré en la especificación de alcance en breve.
CSS Scoping dice
Los descendientes de un host de sombra no deben generar cuadros en el árbol de formato. En su lugar, los contenidos del árbol de sombras activo generan cuadros como si fueran los contenidos del elemento.
CSS Pseudo-Elements describe ::before y ::after as
estos pseudo-elementos generan cajas como si fueran hijos inmediatos de su elemento originario
Entonces, ¿cuál de estos es verdad?
- Primero, todos los contenidos del host de sombra (sin incluir
::beforey::after) se reemplazan por el contenido del árbol de shadow activo. Y luego,::beforey::aftergeneran cuadros en el host de sombra. - Primero,
::beforey::aftergeneran cuadros en el host de sombra. Y luego, todos los contenidos del host de sombra (incluidos::beforey::after) se reemplazan por el contenido del árbol de sombra activo.
Firefox y Chrome hacen lo primero, pero ¿la especificación describe el comportamiento?
var root = document.querySelector(''div'').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";
div::before, div::after {
content: ''Generated content'';
}
<div>Content</div>
Creo que la redacción clave está en esta parte de la sección de contenido generado .
::antes de
Representa un pseudo-elemento hijo con estilo inmediatamente antes del contenido real del elemento de origen.
::después
Representa un pseudo-elemento hijo con estilo inmediatamente antes del contenido real del elemento de origen.
Excusando el obvio error de copiar y pegar en la :: descripción posterior (es un borrador de trabajo), podemos ver que estos pseudo-elementos generan contenido fuera, o "inmediatamente antes", el contenido real del elemento.
Compare esto con esta descripción de la sección de Encapsulación de la Sombra , parece confirmar el comportamiento de Chrome y Firefox.
Los descendientes de un host de sombra no deben generar cuadros en el árbol de formato. En su lugar, los contenidos del árbol de sombras activo generan cuadros como si fueran los contenidos del elemento.
En resumen, un host de sombra reemplaza el contenido real del elemento, y :: before y :: after generan pseudo-elementos inmediatamente antes / después del contenido real de los elementos. Debido a que los pseudo-elementos crean cuadros fuera del contenido que se reemplaza, el contenido que se reemplaza no tiene efecto en los pseudo-elementos.