Shadow DOMは私たちに何を実現させましたか？

Question

私は、シャドーDOMはスタイルのカプセル化を達成し、コンポーネントのHTML実装を隠すことができると思います。

しかし、私がクロムのシャドールートを調べると、コンポーネントのHTMLが見えます。

それでは、達成するのに正確には何が役立ちますか？スタイルカプセル化だけですか？

Answer 1

確かに、DevToolsではシャドウDOMを調べることができますが、index.htmlquerySelector('body').innerHTMLのHTMLを取得した場合、要素のシャドウDOMは含まれません。

カスタム要素のシャドウDOMに切り替えて、そのHTMLにアクセスする必要があります。

シャドーDOMは、他の開発者から要素の実装を隠すことではなく、誤ってCSSやJSなどの要素を読み込んだり操作したりする可能性があります。

これにより、アプリケーション全体のDOMの複雑さを、より管理しやすい小さな部分に分解することができます。