Shadow DOM
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/11/04 17:52 UTC 版)
|
この記事は、全部または一部が他の記事や節と重複しています。 具体的にはWeb Components#Shadow DOMとの重複です。
|
|
この記事は検証可能な参考文献や出典が全く示されていないか、不十分です。 (2025年11月)
|
| HTML |
|---|
 |
Shadow DOMは、WHATWGにおいて仕様が定められているWeb Components と呼ばれる、Document Object Model (DOM) を部品化する仕組みを構成する要素の一つである。
DOMツリーと Shadowサブツリーの間に、通常のDOM操作ではアクセスできない境界を設けることにより、DOMツリーの機能の抽象化をもたらすことが主目的のひとつである。
Googleを中心に仕様の策定、WebKitへの実装が進んでいる。
関連項目
外部リンク
- Shadow DOM W3C Editor's Draft
- Shadow DOM Latest Working Draft
- Web Hypertext Application Technology Working Group
 |
この項目は、インターネットやウェブに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。 |
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のページへのリンク
