关于javascript：shadow-root兄弟元素在attachShadow()调用中消失

Shadow-root sibling elements disappear on attachShadow() call

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

是否用任何东西填充shadowRoot都没关系；阴影附着后，div的孩子立即消失。

关于Codepen的演示：https://codepen.io/anon/pen/VrBdOe

为什么内容消失了？我已经在网站上看到它，所以我知道这是有可能的。例如，请参见https://www.polymer-project.org/2.0/start/quick-tour的代码，节点具有影子根和多个同级共存。那里发生了什么事？

Shadow DOM内容将替换附加了主机(影子根)的原始DOM子树。这就是Shadow DOM的预期行为(因此得名)。

您可以使用Shadow DOM中的元素使它显示。

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

Lite DOM

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