web-dev-qa-db-ja.com

オープンシャドウとクローズドシャドウDOMカプセル化モードの違いは何ですか?

要素にシャドウDOMを作成して、Chrome拡張機能の要素にページスタイルが影響を与えずに要素を表示できるようにします。

Element.createShadowRootのドキュメントを見ると、廃止されていることがわかりましたので、Element.attachShadowをチェックアウトしました。それは私がカプセル化モードを提供しなければならなかったと言いましたが、異なるモードが何をするか説明しませんでした。少し調べてみましたが、違いが何であるかを明確に説明するものは見つかりませんでした。

モードと私が達成しようとしているもののためにどちらを使用するべきかの間の違いは何ですか?

18
metarmask

openモードでは、HTML要素のshadowRootプロパティを介してShadow DOMにアクセスできます。

closedモードではできません。 shadowRootnullを返します。

達成したい場合は、両方のモードを使用できます。

これが 違いの詳細な説明 です。

13
Supersharp

受け入れられた回答に追加します。 Shadow DOMのクローズドモードには、コンポーネントのShadow Rootを公開する方法を(もしあれば)柔軟に決定できるWebコンポーネントの作成者に1つの利点があります。ただし、コンポーネントの作成者がシャドウルートを非表示にしようとするあらゆる努力を回避するのは非常に簡単であるため、気にする必要はないでしょう。 詳細については、Open vs. Closed Shadow DOMを参照 .

5
Leon Revill