Alcance CSS dice

Los descendientes de unanfitrión sombra no debe generar cuadros en el árbol de formato. En cambio, el contenido de laárbol de sombra activo generar cajas como si fueran el contenido del elemento en su lugar.

Pseudoelementos CSS describe::before y::after como

estos pseudo-elementos generan cajas como si fueran hijos inmediatos de suselemento originario

Entonces, ¿cuál de estos es cierto?

Primero, todos los contenidos del host sombra (sin incluir::before y::after) se reemplazan por el contenido del árbol de sombra activo. Y entonces,::before y::after generar cajas en el host de sombra.Primero,::before y::after generar cajas en el host de sombra. Y luego, todos los contenidos del host sombra (incluidos::before y::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>