javascript - Shadow-root 兄弟元素在 attachShadow() 调用时消失

Question

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

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

codepen 上的演示:https://codepen.io/anon/pen/VrBdOe

为什么内容消失了？我在网站上看到过它，所以我知道它有可能以某种方式实现。查看 https://www.polymer-project.org/2.0/start/quick-tour 的代码例如，<pw-shell>节点有影子根和几个 sibling 共存。那里发生了什么？

Answer 1

影子 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>

您应该阅读 tutorial about Shadow DOM了解更多详情。