要素にシャドウDOMを作成して、Chrome拡張機能の要素にページスタイルが影響を与えずに要素を表示できるようにします。
Element.createShadowRoot
のドキュメントを見ると、廃止されていることがわかりましたので、Element.attachShadow
をチェックアウトしました。それは私がカプセル化モードを提供しなければならなかったと言いましたが、異なるモードが何をするか説明しませんでした。少し調べてみましたが、違いが何であるかを明確に説明するものは見つかりませんでした。
モードと私が達成しようとしているもののためにどちらを使用するべきかの間の違いは何ですか?
open
モードでは、HTML要素のshadowRoot
プロパティを介してShadow DOMにアクセスできます。
closed
モードではできません。 shadowRoot
はnull
を返します。
達成したい場合は、両方のモードを使用できます。
これが 違いの詳細な説明 です。
受け入れられた回答に追加します。 Shadow DOMのクローズドモードには、コンポーネントのShadow Rootを公開する方法を(もしあれば)柔軟に決定できるWebコンポーネントの作成者に1つの利点があります。ただし、コンポーネントの作成者がシャドウルートを非表示にしようとするあらゆる努力を回避するのは非常に簡単であるため、気にする必要はないでしょう。 詳細については、Open vs. Closed Shadow DOMを参照 .