css - 影子 DOM 是否替换了::before 和::after？

Question

CSS Scoping说

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将 ::before 和 ::after 描述为

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

那么，哪一个是正确的？

• 首先，shadow host 的所有内容(不包括::before 和::after)都被active shadow tree 的内容替换。然后，::before 和 ::after 在影子宿主中生成框。
• 首先，::before 和::after 在影子宿主中生成框。然后，shadow host的所有内容(包括::before和::after)都被active shadow tree的内容替换。

Firefox 和 Chrome 执行前者，但规范是否描述了该行为？

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 规范作者。

实际上，官方的答案是……未定义!

我在编写范围规范时没有考虑过这种交互。我会向列表发送电子邮件，我们会解决的。几乎可以肯定，我们将选择浏览器当前所做的任何事情(这似乎让::before/after 即使在影子主机中也“按预期”工作)。

编辑:工作组的回应是一致的——当前的实现行为(::在影子主机上工作之前/之后)是应该的。我很快会将其编辑到范围规范中。