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

Question

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

如果我用任何东西填充 shadowRoot 都没关系；一旦附上阴影，div 的 children 就会消失。

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

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

Answer 1

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

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

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

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

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

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

Shadow-root sibling elements disappear on attachShadow() call

html

javascript

shadow-dom

polymer