shadow DOM是否替换:: before和:: after？ [英] Does the shadow DOM replace ::before and ::after?

问题描述

CSS Scoping 说

shadow host 不得在
格式化树中生成框。相反，活动阴影树的内容b $ b生成框，就像它们是元素的内容一样。

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

这些伪元素生成框， b $ b

那么哪些是真的？

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

$ b $




答案其实是官方的... undefined！





我在写Scoping规范时没有想到这种互动。我会给列表发送一封电子邮件，我们会找出来。几乎可以肯定的是，我们将解决任何浏览器目前做的（这似乎是letting ::前/后工作如预期，即使在影子主机）。





编辑：工作组的反应是一致的 - 当前的实现行为（::影子主机上的/ before / after 工作）是它应该是什么。我会很快将其编辑到范围规范。




CSS Scoping says

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 describes ::before and ::after as

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

So which of these is true?

• First, all the contents of the shadow host (not including ::before and ::after) are replaced by the contents of the active shadow tree. And then, ::before and ::after generate boxes in the shadow host.
• First, ::before and ::after generate boxes in the shadow host. And then, all the contents of the shadow host (including ::before and ::after) are replaced by the contents of the active shadow tree.

Firefox and Chrome do the former, but does the spec describe the behavior?

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

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

<div>Content</div>

解决方案

CSS Scoping spec author here.

The answer is actually, officially... undefined!

I didn't think about this interaction when I was writing the Scoping spec. I'll send an email to the list, and we'll figure it out. Almost certainly, we'll settle on whatever browsers currently do (which appears to be letting ::before/after work "as expected" even in shadow hosts).

Edit: The Working Group's response was unanimous - the current implementation behavior (::before/after do work on shadow hosts) is how it should be. I'll edit it into the Scoping spec shortly.

这篇关于shadow DOM是否替换:: before和:: after？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！