Shadow DOM

ウィキペディア

Shadow DOM

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/11/13 02:50 UTC 版)

Shadow DOM は、 WHATWG において仕様が定められている Web Components と呼ばれる、 Document Object Model (DOM) を部品化する仕組みを構成する要素の一つである。 DOM ツリーと Shadow サブツリーの間に、通常の DOM 操作ではアクセスできない境界をもうけることにより、 DOM ツリーの機能の抽象化をもたらすことが主な目的のひとつである。

ウィキペディア小見出し辞書

Shadow DOM

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/11/14 16:21 UTC 版)

「Web Components」の記事における「Shadow DOM」の解説

Shadow DOMは、ウェブブラウザがDOM要素をメインのdocument DOMツリーに追加せずにレンダリングできるようにする機能である。これにより、開発者とブラウザが到達できる範囲にバリアを作ることができる。開発者はネストされた要素と同じようにはShadowDOMにアクセスできなくなる一方、ブラウザはネストされた要素と同じ方法でレンダリングとコードの修正が可能になる。CSSを特定の要素のShadow DOM内にスコープすることでHTML要素をカプセル化でき、CSSスタイルがリークして意図しない影響を他の要素に与える恐れがなくなる。これらの要素はHTMLとCSSに関してカプセル化されているが、依然としてdocument内の他の要素が受け取るイベントを発火できる。 要素内のスコープされたサブツリーはshadow treeと呼ばれる。shadow treeがアタッチされた要素はshadow hostと呼ばれる。 Shadow DOMは、リテラル要素としてアタッチするか、またはscriptを使用して、常に既存の要素と接続されていなければならない。JavaScriptでは、Shadow DOMをElement.attachShadow()を使用してアタッチする。HTMLとCSSをスコープする機能は、カスタム要素の作成に不可欠である。仮にshadow DOMが存在しなければ、別の外部のカスタム要素が望まない方法で相互作用する可能性をなくすことはできない。