Shadow DOM
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/11/13 02:50 UTC 版)
 | この記事は、全部または一部が他の記事や節と重複しています。 具体的にはWeb Components#Shadow_DOMとの重複です。 |
| HTML |
|---|
 |
Shadow DOM は、 WHATWG において仕様が定められている Web Components と呼ばれる、 Document Object Model (DOM) を部品化する仕組みを構成する要素の一つである。 DOM ツリーと Shadow サブツリーの間に、通常の DOM 操作ではアクセスできない境界をもうけることにより、 DOM ツリーの機能の抽象化をもたらすことが主な目的のひとつである。
現在、 Google を中心に仕様の策定、 WebKit への実装が進んでいる。
関連項目
外部リンク
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が存在しなければ、別の外部のカスタム要素が望まない方法で相互作用する可能性をなくすことはできない。
※この「Shadow DOM」の解説は、「Web Components」の解説の一部です。
「Shadow DOM」を含む「Web Components」の記事については、「Web Components」の概要を参照ください。
- Shadow DOMのページへのリンク
