Question

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

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

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

那么这些是真的吗？

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

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

＆＃13;

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";

＆＃13;

div::before, div::after {
  content: 'Generated content';
}

＆＃13;

<div>Content</div>

＆＃13;

Answer 1

CSS Scoping规范作者在这里。

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

当我编写范围规范时，我没有想到这种互动。我会发一封电子邮件到列表中，我们会搞清楚。几乎可以肯定的是，我们将决定当前所做的任何浏览器（看起来像工作之前/之后的那样“正如预期的那样”，即使在影子主机中也是如此）。

编辑：工作组的回应是一致的 - 当前的实现行为（在做之前/之后在阴影主机上工作）应该如何。我很快就会把它编辑成Scoping规范。

Answer 2

我认为关键措辞是the generated content section的这一部分。

<强> ::前

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

<强> ::后

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

在描述中删除了明显的复制粘贴错误（它是一个工作草案），我们可以看到这些伪元素在＆＃34;之前生成内容，或者直接生成＃34;实际内容元素。

将此与Shadow Encapsulation部分的说明进行比较，似乎可以确认Chrome和Firefox的行为。

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

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