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

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.