影子根兄弟元素在 attachShadow() 调用时消失

Question

当我调用host.attachShadow({mode: 'open'})包含一些元素的 div 时，div 的内容似乎消失了。这些元素在 devtools 中仍然可见，但在屏幕上不再可见。

我是否用任何东西填充 shadowRoot 都没有关系；一旦附加阴影，div 的孩子就会消失。

codepen 演示：https ://codepen.io/anon/pen/VrBdOe

为什么内容会消失？我在网站上看到过，所以我知道这是可能的。例如，参见https://www.polymer-project.org/2.0/start/quick-tour的代码，该<pw-shell>节点有一个 shadow-root 和多个兄弟节点并存。那里发生什么事了？

Answer 1

Shadow DOM 内容将替换它（影子根）所附主机的原始 DOM 子树。这是 Shadow DOM 的预期行为（因此得名）。

您可以使用 Shadow DOM 中的元素使其出现。

host.attachShadow( { mode: 'open' } )
    .innerHTML = 'Original DOM: <slot></slot>, in the Shadow DOM'

<div id=host>
Lite DOM
</div>

您应该阅读有关 Shadow DOM的教程以获取更多详细信息。