WebComponents：嵌套的投影节点属于父组件的阴影根

Question

假设您拥有my-app根网络组件的以下模板：

<a-comp>
    <b-comp>
        <d-comp></d-comp>
    </b-comp>
</a-comp>

我的问题是b-comp和d-comp是否属于DOM中的my-app组件，b-comp是否属于a-comp组件，而d-comp考虑投射到b-comp？ 我正在寻找一些定义该规范的规范。

我试图在Angular中使用纯模式测试它并获得以下内容：

这似乎在视觉上证明了我的假设。我还测试了选择器：

const shadow = document.querySelector('my-app').shadowRoot
shadow.querySelector('a-comp'); // <a-comp>​…​</a-comp>​
shadow.querySelector('b-comp'); // <b-comp>​…​</b-comp>​
shadow.querySelector('d-comp'); // <d-comp>​…​</d-comp>​

证明投影的Web组件属于my-app组件。

Answer 1

在Shadow DOM开发人员过去使用<iframe>之前，基本上就是Shadow DOM现在做的事情。

每个<iframe>都会创建一个新的document。所以如果你有三个<iframe>s深，那么你有4个文件。

Shadow DOM会创建类似于新文档的内容。

在支持Shadow DOM的浏览器上，调用函数document.body.getRootNode()会返回document。

但是在Shadow Root中的元素上调用el.getRootNode()将返回该阴影根。并且另一个影子根目录中的每个元素将返回该级别的影子根。

这是允许CSS存在于父文档范围之外的文档。阴影根的作用很像它自己的文档，并防止外部的东西踩到阴影根内的东西。

<a-comp>将<b-comp>作为子项置于其影子根目录中，然后将其放入插槽中，或者由<a-comp>创建并置于其中影子根。

但是<b-comp>不在<a-comp>的阴影根之内，那么它们都在同一个阴影根中。在您的示例中：

<a-comp>
  <b-comp>
    <d-comp></d-comp>
  </b-comp>
</a-comp>

所有这些组件都在同一个影子根目录中。