Does the shadow DOM replace ::before and ::after?

Question

CSS Scoping says

The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.

CSS Pseudo-Elements describes ::before and ::after as

these pseudo-elements generate boxes as if they were immediate children of their originating element

So which of these is true?

• First, all the contents of the shadow host (not including ::before and ::after) are replaced by the contents of the active shadow tree. And then, ::before and ::after generate boxes in the shadow host.
• First, ::before and ::after generate boxes in the shadow host. And then, all the contents of the shadow host (including ::before and ::after) are replaced by the contents of the active shadow tree.

Firefox and Chrome do the former, but does the spec describe the behavior?

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";

div::before, div::after {
  content: 'Generated content';
}

<div>Content</div>

Answer 1

CSS Scoping spec author here.

The answer is actually, officially... undefined!

I didn't think about this interaction when I was writing the Scoping spec. I'll send an email to the list, and we'll figure it out. Almost certainly, we'll settle on whatever browsers currently do (which appears to be letting ::before/after work "as expected" even in shadow hosts).

Edit: The Working Group's response was unanimous - the current implementation behavior (::before/after do work on shadow hosts) is how it should be. I'll edit it into the Scoping spec shortly.

Answer 2

I think the key wording is in this part of the generated content section.

::before

Represents a styleable child pseudo-element immediately before the originating element’s actual content.

::after

Represents a styleable child pseudo-element immediately before the originating element’s actual content.

Excusing the obvious copy-paste error in the ::after description (it is a working draft), we can see that these pseudo-elements generate content outside, or "immediately before", the actual content of the element.

Compare this to this description from the Shadow Encapsulation section, it seems to confirm the behavior of Chrome and Firefox.

The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.

In short, a shadow host replaces the actual contents of the element, and ::before and ::after generate pseudo-elements immediately before/after the elements actual content. Because the pseudo-elements create boxes outside the content being replaced, the content being replaced has no effect on the pseudo-elements.