阴影DOMreplace::之前和::之后？

CSS范围说

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

CSS伪元素描述::before和::after as

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

那么哪个是真的？

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

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范围规格作者在这里。

答案其实是正式的… undefined！

当我编写范围规范时，我没有想到这种交互。 我会发一个电子邮件到列表中，我们会弄清楚。 几乎可以肯定的是，无论浏览器目前在做什么（即使在影子主机中，这似乎是在“工作之前/之后”也是如此）。

编辑：工作组的回应是一致的 – 目前的实施行为（::之前/之后在影子主机上工作）是如何应该的。 我将很快将其编辑到范围规范中。

Answer 2

我认为关键的措辞是在生成的内容部分的这一部分。

：：之前

在原始元素的实际内容之前表示一个可定制的子伪元素。

：：后

在原始元素的实际内容之前表示一个可定制的子伪元素。

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

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

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

简而言之，一个影子主机replace元素的实际内容，:: before和::之后立即生成元素实际内容之前/之后的伪元素。 由于伪元素在被replace的内容之外创build框，被replace的内容对伪元素没有影响。