影子 DOM 会替换 ::before 和 ::after 吗？

Question

CSS Scoping 说

shadow host 的后代不得在 格式化树。相反，active shadow tree 的内容 生成框，就好像它们是元素的内容一样。

CSS Pseudo-Elements 将::before 和::after 描述为

这些伪元素生成盒子，就好像它们是直接的一样 原始元素的子元素

那么下面哪一个是真的？

• 首先，将影子主机的所有内容（不包括::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

CSS 范围规范作者在这里。

答案实际上是，官方...未定义！

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

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

Answer 2

我认为关键词在the generated content section的这一部分。

::之前

在原始元素的实际内容之前表示一个可设置样式的子伪元素。

::之后

在原始元素的实际内容之前表示一个可设置样式的子伪元素。

原谅 ::after 描述中明显的复制粘贴错误（这是一个工作草案），我们可以看到这些伪元素在元素的实际内容之外或“紧接在”元素的实际内容之前生成内容。

将此与 Shadow Encapsulation 部分的描述进行比较，它似乎证实了 Chrome 和 Firefox 的行为。

影子主机的后代不得在格式化树中生成框。相反，活动阴影树的内容会生成框，就好像它们是元素的内容一样。

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