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 gene

Answer 1

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.