阴影 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

那么下面哪一个是正确的？

• 首先，影子主机的所有内容（不包括::before和::after）被活动影子树的内容替换。然后，::before 和 ::after 在影子主机中生成框。
• 首先，::before和::after在影子宿主中生成框。然后，影子主机的所有内容（包括::before和::after）被活动影子树的内容替换。

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

我认为关键的措辞在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.

排除::after描述中明显的复制粘贴错误（这是一个工作草案），我们可以看到这些伪元素在外部生成内容，或者"immediately before"，实际内容元素.

将此与 Shadow Encapsulation 部分的描述进行比较，它似乎证实了 Chrome 和 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.

简而言之，影子宿主替换了元素的实际内容，::before 和::after 立即生成伪元素before/after 元素的实际内容。因为伪元素在被替换的内容之外创建框，所以被替换的内容对伪元素没有影响。

Answer 2

CSS 范围规范作者在此。

答案实际上是正式的...未定义！

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

编辑：工作组的回应是一致的——当前的实施行为（::before/after do 在影子主机上工作）是应该的。我很快会将其编辑到范围规范中。