attachShadow（）コールでシャドールートの兄弟要素が消える

Question

内部にいくつかの要素を含む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のコードを参照してください。たとえば、<pw-shell>ノードにはシャドウルートと複数の兄弟が共存しています。そこには何が起こっているのですか？

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をお読みください。