¿El shadow DOM reemplaza: before y: after?

CSS Scoping dice

Los descendientes de un shadow host no deben generar cajas en el formatear el árbol. En su lugar, el contenido del árbol de sombras activo genere cajas como si fueran el contenido del elemento en su lugar.

Pseudo-elementos CSS describe ::before y ::after como

Estos pseudo-elementos generan cajas como si fueran inmediatas hijos de sus originarios elemento

Entonces, ¿cuál de estos es verdadero?

  • En primer lugar, todo el contenido del shadow host (sin incluir ::before y ::after) se sustituye por el contenido del árbol de sombras activo. Y luego, ::before y ::after generan cajas en el host de sombra.
  • Primero, ::before y ::after generan cajas en el host de sombra. Y luego, todos los contenidos del host de sombra (incluidos ::before y ::after) se reemplazan por los contenidos de la sombra activa arbol.

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>
Author: TylerH, 2015-06-28
Source

2 answers

CSS Scoping spec autor aquí.

La respuesta es en realidad, oficialmente... undefined!

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. Casi con certeza, nos conformaremos con lo que los navegadores hacen actualmente (que parece estar dejando ::before/after work "como se esperaba" incluso en hosts sombra).

Editar: La respuesta del Grupo de Trabajo fue unánime - el comportamiento actual de la implementación (:: before / after do work on shadow hosts) es como debería ser. Lo editaré en la especificación de alcance en breve.

 23
Author: Xanthir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-01 19:55:11

Creo que el texto clave está en esta parte de la sección de contenido generado.

::antes

Representa un pseudo-elemento hijo estilizable inmediatamente antes del contenido real del elemento originario.

::después de

Representa un pseudo-elemento hijo estilizable inmediatamente antes del contenido real del elemento originario.

Excusando el error obvio de copiar y pegar en la descripción:: after (es un borrador de trabajo), podemos ver que estos pseudo-elementos generan contenido fuera ,o "inmediatamente antes", del contenido real del elemento.

Compare esto con esta descripción de la sección Shadow Encapsulation, parece confirmar el comportamiento de Chrome y Firefox.

Los descendientes de un shadow host no deben generar cajas en el árbol de formato. En su lugar, el contenido del árbol de sombras activo genera cajas como si fueran el contenido del elemento en su lugar.

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 cajas fuera del contenido que se reemplaza, el contenido que se reemplaza no tiene ningún efecto en los pseudo-elementos.

 2
Author: Alexander O'Mara,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-30 01:36:42