このページは Cloud Translation API によって翻訳されました。

Shadow DOM v1 - 自己完結型のウェブコンポーネント

ウェブデベロッパーは Shadow DOM を使用して、ウェブコンポーネント用に区分化された DOM と CSS を作成可能

Eric Bidelman

概要

Shadow DOM は、ウェブアプリ構築の不安定さを取り除きます。脆弱さ HTML、CSS、JS のグローバルな性質に基づいています。私たちは何年にもわたり、とてつもない数 / ツール問題を回避できる必要がありますたとえば、新しい HTML ID/クラスを使用する場合、ページで使用されている既存の名前と競合するかどうかがわかりません。軽い虫がこびりついてくる。 CSS の具体性が大きな問題になる（すべて !important）、スタイルセレクタが制御不能になりパフォーマンスが低下する可能性があります。リスト説明します。

Shadow DOM は CSS と DOM を修正します。スコープ付きスタイルをウェブに導入します。できます。ツールや命名規則がない場合は、CSS とマークアップ、実装の詳細の非表示、自己完結型の作成者であるコンポーネントを標準 JavaScript で記述しています。

はじめに

Shadow DOM は、次の 3 つのウェブコンポーネント標準のうちの一つです。 HTML テンプレート Shadow DOM とカスタム要素。 HTML のインポート以前はリストに含まれていましたが非推奨になりました。

Shadow DOM を使用するウェブコンポーネントを作成する必要はありません。ただし、その利点（CSS スコープ、DOM カプセル化、構築し、再利用可能なコードをビルドします。カスタム要素復元力が高く、高度な構成が可能で、非常に再利用しやすいです。カスタムの場合要素は（JS API を使用して）新しい HTML を作成する方法であり、Shadow DOM は HTML と CSS を指定する方法です。2 つの API を組み合わせて実装する方法を学びました

Shadow DOM は、コンポーネントベースのアプリを構築するためのツールとして設計されています。したがって、ウェブ開発における一般的な問題に対するソリューションを提供します。

分離された DOM: コンポーネントの DOM は自己完結型です（例: document.querySelector() はコンポーネントの Shadow DOM 内のノードを返しません）。
スコープ CSS: Shadow DOM 内で定義された CSS のスコープは、Shadow DOM 内に設定されます。スタイルルールページのスタイルが浸透していない
コンポジション: コンポーネント用に宣言型のマークアップベースの API を設計します。
CSS の簡素化 - 対象範囲別 DOM とは、シンプルな CSS セレクタなどを使用できる汎用の ID またはクラス名を使用します。名前の競合を心配する必要はありません。
生産性 - アプリを大きな 1 つの大きな DOM ではなく複数のチャンクとして考える（グローバル）ページをご覧ください。

で確認できます。

`fancy-tabs` デモ

この記事では、デモコンポーネント（<fancy-tabs>）について説明します。コードスニペットを参照できるようになりますブラウザが API をサポートしている場合、すぐ下にあるライブデモをご覧くださいそれ以外の場合は、GitHub で完全なソースをご確認ください。

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> GitHub でソースを表示

Shadow DOM とは

DOM の背景

HTML は扱いやすいため、ウェブを支えています。タグをいくつか宣言することで、表示と構成の両方を備えたページを数秒で作成できます。ただし、 HTML だけではそれほど役に立ちません。人間にとってテキストはしかし機械にはもっと何かが必要ですドキュメントオブジェクトを入力してくださいモデル（DOM）です。

ブラウザはウェブページを読み込むと、さまざまな興味深い処理を行います。次のいずれか作成者の HTML をライブドキュメントに変換します。基本的に、ページの構造を理解するために、ブラウザは HTML（静的データモデル（オブジェクト/ノード）に変換します。ブラウザは DOM というノードのツリーを作成して、HTML の階層を作成します。便利な点 DOM の優れた点は、ページがライブで表現されていることです。静的トレーニングのブラウザにより生成されるノードには、プロパティ、メソッド、しかも...プログラムで操作できる！だからこそ Google が開発した要素を直接指定できます。

const header = document.createElement('header');
const h1 = document.createElement('h1');
h1.textContent = 'Hello DOM';
header.appendChild(h1);
document.body.appendChild(header);

このコードは、次の HTML マークアップを生成します。

<body>
    <header>
    <h1>Hello DOM</h1>
    </header>
</body>

それで十分です。その後 Shadow DOM とは何ですか。

隠された DOM

Shadow DOM は単なる通常の DOM ですが、2 つの違いがあります。1）作成/使用方法と、 2）ページの他の部分との関係における動作通常 DOM はそれらを別の要素の子として追加できます。Shadow DOM を使用すると、要素に接続され、その要素とは分離されている、スコープが設定された DOM ツリーを作成する表示されます。このスコープが設定されたサブツリーはシャドウツリーと呼ばれます。要素シャドウホストが接続されています。シャドウに追加したものは、 <style> を含め、ホスティング要素に対してローカルです。これが Shadow DOM の仕組みです。 CSS スタイルスコープが実現します

Shadow DOM の作成

シャドウルートは、「ホスト」要素にアタッチされるドキュメントフラグメントです。 Shadow ルートをアタッチすると、要素が Shadow DOM を取得します。宛先要素の Shadow DOM を作成するには、element.attachShadow() を呼び出します。

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().

// header.shadowRoot === shadowRoot
// shadowRoot.host === header

.innerHTML を使用して Shadow ルートを埋めていますが、他の DOM を使用することもできます APIこれがウェブです。選択肢はあります。

この仕様では要素のリストを定義作成できません。要素が元の画像に反映される理由はいくつかあります。次のように指定します。

要素用に独自の内部 Shadow DOM がすでにブラウザによってホストされている（<textarea>、<input>）。
要素が Shadow DOM（<img>）をホストすることは意味がありません。

たとえば、これは機能しません。

    document.createElement('input').attachShadow({mode: 'open'});
    // Error. `<input>` cannot host shadow dom.

カスタム要素用に Shadow DOM を作成する

Shadow DOM は、特にフロントエンドのカスタム要素。 Shadow DOM を使用して要素の HTML、CSS、JS を区分けすることで、「ウェブコンポーネント」を作成します。

例 - カスタム要素によって Shadow DOM がそれ自体に付加される 次のようにして DOM/CSS をカプセル化します。

// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
customElements.define('fancy-tabs', class extends HTMLElement {
    constructor() {
    super(); // always call super() first in the constructor.

    // Attach a shadow root to <fancy-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
        <style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
        <div id="tabs">...</div>
        <div id="panels">...</div>
    `;
    }
    ...
});

ここで興味深い点がいくつかあります。1 つ目はカスタム要素は、<fancy-tabs> のインスタンスがある場合に独自の Shadow DOM を作成します作成されます。これは constructor() で行います。2 つ目は <style> 内の CSS ルールのスコープは <fancy-tabs> に設定されます。

構成とスロット

構成は Shadow DOM の最も知られていない機能の一つですが、最も重要な要素です

ウェブ開発の世界では、コンポジションはアプリを構築する方法です。宣言的に行うことができます。さまざまな構成要素（<div>、<header>、 <form>、<input> など）が集まってアプリを形成します。これらのタグの中には相互に通信します。コンポジションのために、<select>、 <details>、<form>、<video> は非常に柔軟です。これらのタグはすべてなんらかの特別な処理を行いますたとえば <select> は、<option> と <optgroup> をプルダウンにレンダリングする方法を把握しています。複数選択ウィジェットも用意されています<details> 要素は、<summary> を展開矢印。<video> も、特定の子に対処する方法を知っています。 <source> 要素はレンダリングされませんが、動画の動作には影響します。魔法だ！

用語: Light DOM と Shadow DOM

Shadow DOM のコンポジションがウェブに新たな基盤を導入必要があります。詳細に入る前に同じ専門用語を使用します

Light DOM

コンポーネントのユーザーが記述するマークアップ。この DOM はコンポーネントの Shadow DOM が作成されます。これは要素の実際の子です。

<better-button>
    <!-- the image and span are better-button's light DOM -->
    <img src="gear.svg" slot="icon">
    <span>Settings</span>
</better-button>

Shadow DOM

コンポーネント作成者が作成する DOM。Shadow DOM はコンポーネントのローカルにあり、内部構造とスコープ CSS を定義し、実装をカプセル化します。表示されます。また、コンシューマが作成したマークアップをレンダリングする方法も定義できます。必要があります。

#shadow-root
    <style>...</style>
    <slot name="icon"></slot>
    <span id="wrapper">
    <slot>Button</slot>
    </span>

フラット化された DOM ツリー

ブラウザがユーザーの Light DOM を Shadow に分散した結果最終的な成果物がレンダリングされますフラット化されたツリーは、最終的にページに表示される内容を確認します

<better-button>
    #shadow-root
    <style>...</style>
    <slot name="icon">
        <img src="gear.svg" slot="icon">
    </slot>
    <span id="wrapper">
        <slot>
        <span>Settings</span>
        </slot>
    </span>
</better-button>

<slot>要素

Shadow DOM は、<slot> 要素を使用してさまざまな DOM ツリーをまとめて構成します。 スロットはコンポーネント内のプレースホルダで、ユーザーが情報を入力してマークアップを追加します。1 つ以上のスロットを定義することで、外部のマークアップをレンダリングするよう促すことができるそれをコンポーネントの Shadow DOM 内で呼び出します。基本的には、「ユーザーのリクエストを マークアップを追加します。

要素は「クロス」できます<slot> が招待したときの Shadow DOM の境界できます。これらの要素は分散ノードと呼ばれます。概念的には、少し奇妙に思えるかもしれません。スロットは DOM を物理的に移動しません。 Shadow DOM 内の別の場所でレンダリングします。

コンポーネントは、その Shadow DOM に 0 個以上のスロットを定義できます。スロットは空でもかまいませんフォールバックコンテンツの提供もできます。ユーザーが Light DOM を提供していない場合代替コンテンツがスロットにレンダリングされます。

<!-- Default slot. If there's more than one default slot, the first is used. -->
<slot></slot>

<slot>fallback content</slot> <!-- default slot with fallback content -->

<slot> <!-- default slot entire DOM tree as fallback -->
    <h2>Title</h2>
    <summary>Description text</summary>
</slot>

名前付きスロットを作成することもできます。名前付きスロットはユーザーが名前で参照する Shadow DOM です。

例 - <fancy-tabs> の Shadow DOM 内のスロット:

#shadow-root
    <div id="tabs">
    <slot id="tabsSlot" name="title"></slot> <!-- named slot -->
    </div>
    <div id="panels">
    <slot id="panelsSlot"></slot>
    </div>

コンポーネントユーザーは、次のように <fancy-tabs> を宣言します。

<fancy-tabs>
    <button slot="title">Title</button>
    <button slot="title" selected>Title 2</button>
    <button slot="title">Title 3</button>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
</fancy-tabs>

<!-- Using <h2>'s and changing the ordering would also work! -->
<fancy-tabs>
    <h2 slot="title">Title</h2>
    <section>content panel 1</section>
    <h2 slot="title" selected>Title 2</h2>
    <section>content panel 2</section>
    <h2 slot="title">Title 3</h2>
    <section>content panel 3</section>
</fancy-tabs>

このフラット化されたツリーは次のようになります。

<fancy-tabs>
    #shadow-root
    <div id="tabs">
        <slot id="tabsSlot" name="title">
        <button slot="title">Title</button>
        <button slot="title" selected>Title 2</button>
        <button slot="title">Title 3</button>
        </slot>
    </div>
    <div id="panels">
        <slot id="panelsSlot">
        <section>content panel 1</section>
        <section>content panel 2</section>
        <section>content panel 3</section>
        </slot>
    </div>
</fancy-tabs>

このコンポーネントはさまざまな構成を処理できますが、フラット化された DOM ツリーに変更はありません。<button> から <h2>。このコンポーネントは、さまざまな種類の子を処理するために作成されたものです。 <select> のように！

スタイル設定

ウェブコンポーネントのスタイル設定にはさまざまなオプションがあります。Shadow を使用するコンポーネント DOM は、メインページでスタイルを設定することも、独自のスタイルを定義することも、 CSS カスタムプロパティの形式）を使用して、ユーザーがデフォルトをオーバーライドできるようにします。

コンポーネント定義のスタイル

Shadow DOM の最も便利な機能は、スコープ CSS です。

外側のページの CSS セレクタは、コンポーネント内では適用されません。
内部で定義したスタイルは染み込まない。スコープはホスト要素です。

Shadow DOM 内で使用される CSS セレクタは、コンポーネントにローカルに適用されます。インつまり、共通の ID/クラス名を再度使用しても、心配せずに済みます。詳細を確認できますCSS セレクタをシンプルにすることを推奨確認できますパフォーマンスの面でも優れています。

例 - Shadow ルートで定義されたスタイルがローカルなものである

#shadow-root
    <style>
    #panels {
        box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
        background: white;
        ...
    }
    #tabs {
        display: inline-flex;
        ...
    }
    </style>
    <div id="tabs">
    ...
    </div>
    <div id="panels">
    ...
    </div>

また、スタイルシートのスコープは Shadow ツリーに設定されます。

#shadow-root
    <link rel="stylesheet" href="styles.css">
    <div id="tabs">
    ...
    </div>
    <div id="panels">
    ...
    </div>

<select> 要素がどのように複数選択ウィジェットをレンダリングするか、プルダウンなど）を使用して、multiple 属性を追加します。

<select multiple>
  <option>Do</option>
  <option selected>Re</option>
  <option>Mi</option>
  <option>Fa</option>
  <option>So</option>
</select>

<select> は、指定された属性に基づいて、それ自体を異なるスタイルに設定できます。宣言します。ウェブコンポーネントでも、:host を使用してそれ自体のスタイルを設定できます。選択します。

例 - それ自体のスタイル設定コンポーネント

<style>
:host {
    display: block; /* by default, custom elements are display: inline */
    contain: content; /* CSS containment FTW. */
}
</style>

:host の問題点の一つは、親ページのルールの方が特異性が高いことです。 :host ルールより優先されます。つまり、外側のスタイルが優先されます。このを使用すると、ユーザーは外部から最上位のスタイル設定をオーバーライドできます。また、:host シャドウルートのコンテキストでしか機能しないため、説明します

:host(<selector>) の機能的な形式を使用すると、次の場合にホストをターゲットにできます。 <selector> と一致する。このようにすることで、コンポーネントをカプセル化し、ユーザーの操作や状態に反応する動作や、内部ノードに基づいてできます。

<style>
:host {
    opacity: 0.4;
    will-change: opacity;
    transition: opacity 300ms ease-in-out;
}
:host(:hover) {
    opacity: 1;
}
:host([disabled]) { /* style when host has disabled attribute. */
    background: grey;
    pointer-events: none;
    opacity: 0.4;
}
:host(.blue) {
    color: blue; /* color host when it has class="blue" */
}
:host(.pink) > #tabs {
    color: pink; /* color internal #tabs node when host has class="pink". */
}
</style>

コンテキストに基づくスタイル設定

:host-context(<selector>) は、自身またはその祖先のいずれかである場合、コンポーネントに一致します。 <selector> と一致します。一般的な用途は、コンポーネントの学習します。たとえば、多くのユーザーはクラスを適用することでテーマ設定を行います。 <html> または <body>:

<body class="darktheme">
    <fancy-tabs>
    ...
    </fancy-tabs>
</body>

:host-context(.darktheme) は、子孫である場合に <fancy-tabs> のスタイルを設定します /.darktheme:

:host-context(.darktheme) {
    color: white;
    background: black;
}

:host-context() はテーマ設定に役立ちますが、より優れたアプローチは、 CSS カスタムプロパティを使用してスタイルフックを作成するをご覧ください。

分散ノードのスタイル設定

::slotted(<compound-selector>) は、特定のゾーンに分散されたノードに一致します。 <slot>。

名バッジコンポーネントを作成したとします。

<name-badge>
    <h2>Eric Bidelman</h2>
    <span class="title">
    Digital Jedi, <span class="company">Google</span>
    </span>
</name-badge>

コンポーネントの Shadow DOM では、ユーザーの <h2> と .title のスタイルを設定できます。

<style>
::slotted(h2) {
    margin: 0;
    font-weight: 300;
    color: red;
}
::slotted(.title) {
    color: orange;
}
/* DOESN'T WORK (can only select top-level nodes).
::slotted(.company),
::slotted(.title .company) {
    text-transform: uppercase;
}
*/
</style>
<slot></slot>

前述したように、<slot> はユーザーの Light DOM を移動しません。日時ノードが <slot> に分散されている場合、<slot> は DOM をレンダリングしますが、ノードは物理的に置かれたままになります配信前に適用したスタイルは、引き続き配布後に適用されます。ただし、Light DOM が分散されている場合は、追加のスタイル（Shadow DOM で定義されたスタイル）を使用できます。

<fancy-tabs> のより詳細な例をもう 1 つ示します。

const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
    <style>
    #panels {
        box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
        background: white;
        border-radius: 3px;
        padding: 16px;
        height: 250px;
        overflow: auto;
    }
    #tabs {
        display: inline-flex;
        -webkit-user-select: none;
        user-select: none;
    }
    #tabsSlot::slotted(*) {
        font: 400 16px/22px 'Roboto';
        padding: 16px 8px;
        ...
    }
    #tabsSlot::slotted([aria-selected="true"]) {
        font-weight: 600;
        background: white;
        box-shadow: none;
    }
    #panelsSlot::slotted([aria-hidden="true"]) {
        display: none;
    }
    </style>
    <div id="tabs">
    <slot id="tabsSlot" name="title"></slot>
    </div>
    <div id="panels">
    <slot id="panelsSlot"></slot>
    </div>
`;

この例では、タブタイトル用の名前付きスロットと、タブパネルのコンテンツスロットですユーザーがタブを選択すると、選択内容が太字で表示されます。そのパネルを表示します。そのために、内部 IP アドレスしか持たない分散ノードを selected 属性。カスタム要素の JS（ここには示されていません）は、属性を適切な時刻に指定します。

外部からコンポーネントのスタイル設定を行う

外部からコンポーネントのスタイルを設定するには、いくつかの方法があります。最も簡単なタグ名をセレクタとして使用します。

fancy-tabs {
    width: 500px;
    color: red; /* Note: inheritable CSS properties pierce the shadow DOM boundary. */
}
fancy-tabs:hover {
    box-shadow: 0 3px 3px #ccc;
}

外側のスタイルは常に Shadow DOM で定義されたスタイルよりも優先されます。たとえばユーザーがセレクタ fancy-tabs { width: 500px; } を記述した場合は、このセレクタが優先されます。コンポーネントのルール: :host { width: 650px;}。

コンポーネント自体のスタイルを設定しても、ここまではやっと終わりです。では、コンポーネントの内部をスタイル設定するにはどうすればよいでしょうか。そのためには、カスタム CSS が必要です。プロパティをご覧ください。

CSS カスタムプロパティを使用してスタイルフックを作成する

コンポーネント作成者がスタイルフックを提供している場合、ユーザーは内部スタイルを調整できます。 CSS カスタムプロパティを使用します。概念的には、この考え方は <slot>。「スタイルプレースホルダ」を作成するオーバーライドできます

例 - <fancy-tabs> を使用すると、ユーザーは背景色をオーバーライドできます。

<!-- main page -->
<style>
    fancy-tabs {
    margin-bottom: 32px;
    --fancy-tabs-bg: black;
    }
</style>
<fancy-tabs background>...</fancy-tabs>

Shadow DOM の内部:

:host([background]) {
    background: var(--fancy-tabs-bg, #9E9E9E);
    border-radius: 10px;
    padding: 10px;
}

この場合、コンポーネントはバックグラウンドの値として black を使用します。これは、ユーザーから提供された情報です。それ以外の場合は、デフォルトの #9E9E9E が使用されます。

高度なトピック

クローズドシャドウルートの作成（非推奨）

Shadow DOM には、「クローズド」と呼ばれる別の手法もあります。モードです。新しい閉じられた Shadow ツリー。JavaScript の外部からは内部 DOM にアクセスできない必要があります。これは、<video> などのネイティブ要素の仕組みに似ています。 JavaScript は <video> の Shadow DOM にアクセスできません。これは、ブラウザがクローズドモードのシャドウルートを使用して実装します。

例 - クローズドシャドウツリーの作成:

const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'closed'}); // close shadow tree
// div.shadowRoot === null
// shadowRoot.host === div

他の API もクローズドモードの影響を受けます。

Element.assignedSlot / TextNode.assignedSlot で null が返されます
Event.composedPath(): シャドウ内の要素に関連付けられたイベント DOM は [] を返します。

で確認できます。

ウェブコンポーネントを作成してはならない理由を、 {mode: 'closed'}:

人為的なセキュリティ感覚。攻撃者によるネットワーク侵入を Element.prototype.attachShadow のハイジャック。

クローズドモードでは、カスタム要素コードが自身の要素にアクセスできない Shadow DOM のものです。これで全然不合格です。代わりに、参照ファイルではなく後で使用したい場合は、querySelector() などを使用してください。これは完全にはクローズドモードの本来の目的を果たせません。

    customElements.define('x-element', class extends HTMLElement {
    constructor() {
    super(); // always call super() first in the constructor.
    this._shadowRoot = this.attachShadow({mode: 'closed'});
    this._shadowRoot.innerHTML = '<div class="wrapper"></div>';
    }
    connectedCallback() {
    // When creating closed shadow trees, you'll need to stash the shadow root
    // for later if you want to use it again. Kinda pointless.
    const wrapper = this._shadowRoot.querySelector('.wrapper');
    }
    ...
});

クローズドモードでは、エンドユーザーに対するコンポーネントの柔軟性が低下します。皆さんがウェブコンポーネントを構築すると、アプリのコンポーネントを機能。構成オプション。ユーザーが求めるユースケース。共通内部ノードに適したスタイル設定のフックが忘れられている場合です。クローズドモードでは、ユーザーがデフォルトをオーバーライドして微調整する方法はないあります。コンポーネントの内部にアクセスできることは、非常に便利です。最終的に、ユーザーはコンポーネントをフォークするか、別のコンポーネントを想定していた動作が得られない場合はお手数をおかけしますが、よろしくお願いいたします。

JS でのスロットの操作

Shadow DOM API には、スロットや分散処理のためのユーティリティが説明します。これらは、カスタム要素を作成するときに便利です。

スロット変更イベント

slotchange イベントは、スロットの分散ノードが変更されると起動します。対象たとえば、ユーザーが Light DOM から子を追加または削除した場合です。

const slot = this.shadowRoot.querySelector('#slot');
slot.addEventListener('slotchange', e => {
    console.log('light dom children changed!');
});

注: slotchange は、コンポーネントのインスタンスが最初に初期化されたときには呼び出されません。

Light DOM のその他の種類の変更をモニタリングするには、 MutationObserver を要素のコンストラクタ内で指定する必要があります。

スロットでレンダリングされている要素

スロットに関連付けられている要素を知っておくと便利な場合があります。発信 slot.assignedNodes(): スロットがレンダリングする要素を確認します。「 {flatten: true} オプションもスロットのフォールバックコンテンツを返します（ノードがない場合、されます）。

たとえば、次のような Shadow DOM があるとします。

<slot><b>fallback content</b></slot>

用途	電話	結果
<my-component>コンポーネントテキスト</my-component>	`slot.assignedNodes();`	`[component text]`
<my-component></my-component>	`slot.assignedNodes();`	`[]`
<my-component></my-component>	`slot.assignedNodes({flatten: true});`	`[<b>fallback content</b>]`

要素が割り当てられているスロット

逆の質問に答えることもできます。element.assignedSlot の伝え方どのコンポーネントスロットに要素が割り当てられているかを示すことができます。

Shadow DOM イベントモデル

イベントが Shadow DOM から出現すると、そのターゲットが Shadow DOM のカプセル化を実現します。つまりイベントのターゲットを絞り込んで内部要素ではなくコンポーネントに由来するように説明します一部のイベントは Shadow DOM の外部に伝播しません。

シャドウ境界を越えるイベントは次のとおりです。

主なイベント: blur、focus、focusin、focusout
マウスイベント: click、dblclick、mousedown、mouseenter、mousemove など
ホイールイベント: wheel
入力イベント: beforeinput、input
キーボードイベント: keydown、keyup
楽曲イベント: compositionstart、compositionupdate、compositionend
DragEvent: dragstart、drag、dragend、drop など

ヒント

シャドウツリーが開いている場合、event.composedPath() を呼び出すと配列が返されます。通過するノードの数を表します。

カスタムイベントを使用する

Shadow ツリーの内部ノードで呼び出されるカスタム DOM イベントはシャドーイングは、 composed: true フラグ:

// Inside <fancy-tab> custom element class definition:
selectTab() {
    const tabs = this.shadowRoot.querySelector('#tabs');
    tabs.dispatchEvent(new Event('tab-select', {bubbles: true, composed: true}));
}

composed: false（デフォルト）の場合、コンシューマはイベントをリッスンできません作成します。

<fancy-tabs></fancy-tabs>
<script>
    const tabs = document.querySelector('fancy-tabs');
    tabs.addEventListener('tab-select', e => {
    // won't fire if `tab-select` wasn't created with `composed: true`.
    });
</script>

フォーカスの処理

Shadow DOM のイベントモデルで説明したように、 Shadow DOM の内部が、ホスティング要素から来たように調整されます。たとえば、シャドウルート内の <input> をクリックするとします。

<x-focus>
    #shadow-root
    <input type="text" placeholder="Input inside shadow dom">

focusのイベントの発生元は<input>ではなく、<x-focus>になります。同様に、document.activeElement は <x-focus> になります。シャドウルートが mode:'open' で作成されたもの（クローズドモードを参照）は、内部ノードにアクセスできます。

document.activeElement.shadowRoot.activeElement // only works with open mode.

複数のレベルの Shadow DOM が存在している場合（追加するには、シャドウルートを再帰的にドリルダウンして activeElement を見つけます。

function deepActiveElement() {
    let a = document.activeElement;
    while (a && a.shadowRoot && a.shadowRoot.activeElement) {
    a = a.shadowRoot.activeElement;
    }
    return a;
}

もう 1 つのフォーカスオプションは、delegatesFocus: true オプションです。これは、 Shadow ツリー内の要素のフォーカス動作は次のようになります。

Shadow DOM 内のノードをクリックし、そのノードがフォーカス可能な領域でない場合、最初のフォーカス対象領域がフォーカスされます。
Shadow DOM 内のノードがフォーカスされると、:focus が追加することもできます。

例 - delegatesFocus: true がどのようにフォーカス動作を変更するか

<style>
    :focus {
    outline: 2px solid red;
    }
</style>

<x-focus></x-focus>

<script>
customElements.define('x-focus', class extends HTMLElement {
    constructor() {
    super(); // always call super() first in the constructor.

    const root = this.attachShadow({mode: 'open', delegatesFocus: true});
    root.innerHTML = `
        <style>
        :host {
            display: flex;
            border: 1px dotted black;
            padding: 16px;
        }
        :focus {
            outline: 2px solid blue;
        }
        </style>
        <div>Clickable Shadow DOM text</div>
        <input type="text" placeholder="Input inside shadow dom">`;

    // Know the focused element inside shadow DOM:
    this.addEventListener('focus', function(e) {
        console.log('Active element (inside shadow dom):',
                    this.shadowRoot.activeElement);
    });
    }
});
</script>

結果

上の図は、<x-focus> がフォーカスされている場合（ユーザーがクリック、タブで開いた状態、 focus() など）、"クリック可能な Shadow DOM テキスト"クリックされるか、内部広告が <input> がフォーカスされています（autofocus を含む）。

delegatesFocus: false を設定した場合は、代わりに次のように表示されます。

delegatesFocus: false で、内部入力はフォーカスされています。 — </ph> `delegatesFocus: false` と内部の `<input>` がフォーカスされている。

delegatesFocus: false と x-focus
フォーカスを取得する（tabindex='0' など）。 — </ph> `delegatesFocus: false` と `<x-focus>` フォーカスを取得する（例: `tabindex="0"`）。

delegatesFocus: false と「クリック可能な Shadow DOM テキスト」
（または、要素の Shadow DOM 内の他の空白部分がクリックされたとき）。 — </ph> `delegatesFocus: false` と「クリック可能な Shadow DOM テキスト」（または、要素の Shadow DOM 内の他の空白部分がクリックされたとき）。

ヒントとアドバイス

私はこの数年間、ウェブコンポーネントの作成について 1 つか 2 つ学びました。私はコンポーネントやコードの作成に役立つヒントを Shadow DOM のデバッグです。

CSS の包含を使用

通常、ウェブコンポーネントのレイアウト、スタイル、ペイントはかなり自己完結型です。使用パフォーマンスのための :host での CSS 包含勝ち:

<style>
:host {
    display: block;
    contain: content; /* Boom. CSS containment FTW. */
}
</style>

継承可能なスタイルのリセット

継承可能なスタイル（background、color、font、line-height など）は継続されます Shadow DOM 内に継承されます。すなわち、境界を越えて Shadow DOM の境界をできます。新しい状態から始める場合は、all: initial; を使用してリセットします。継承可能なスタイルが Shadow の境界を越えるときに、初期値にそのスタイルが適用されます。

<style>
    div {
    padding: 10px;
    background: red;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
    }
</style>

<div>
    <p>I'm outside the element (big/white)</p>
    <my-element>Light DOM content is also affected.</my-element>
    <p>I'm outside the element (big/white)</p>
</div>

<script>
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
    <style>
    :host {
        all: initial; /* 1st rule so subsequent properties are reset. */
        display: block;
        background: white;
    }
    </style>
    <p>my-element: all CSS properties are reset to their
        initial value using <code>all: initial</code>.</p>
    <slot></slot>
`;
</script>

ページで使用されているすべてのカスタム要素を検索する

ページで使用されているカスタム要素を見つけると便利な場合があります。そのためには、ページで使用されているすべての要素の Shadow DOM を再帰的に走査する必要がある。

const allCustomElements = [];

function isCustomElement(el) {
    const isAttr = el.getAttribute('is');
    // Check for <super-button> and <button is="super-button">.
    return el.localName.includes('-') || isAttr && isAttr.includes('-');
}

function findAllCustomElements(nodes) {
    for (let i = 0, el; el = nodes[i]; ++i) {
    if (isCustomElement(el)) {
        allCustomElements.push(el);
    }
    // If the element has shadow DOM, dig deeper.
    if (el.shadowRoot) {
        findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
    }
    }
}

findAllCustomElements(document.querySelectorAll('*'));

<template> からの要素の作成

.innerHTML を使用してシャドウルートを設定する代わりに、宣言型の <template>。テンプレートは、インフラストラクチャの構造を宣言するための作成します

例をご覧ください。カスタム要素: 再利用可能なウェブコンポーネントの構築

歴史とブラウザサポート

ここ数年ウェブコンポーネントをフォローしている方は、 Chrome 35 以降（Opera）には古いバージョンの Shadow DOM が説明します。Blink は、引き続き一部の環境において両方のバージョンを並行してサポートしますあります。v0 仕様では、シャドウルートを作成する別の方法が提供されていました。（v1 の element.attachShadow ではなく element.createShadowRoot）。呼び出しの古い方法では引き続き v0 セマンティクスでシャドウルートが作成されるため、既存の v0 コードが破損することはありません

以前の v0 仕様に興味がある場合は、html5rocks をご覧ください。記事: 1 2 3. P-MAX と Shadow DOM v0 と v1 の違いをご確認ください。

ブラウザサポート

Shadow DOM v1 は Chrome 53 でリリースされ（ステータス）、 Opera 40、Safari 10、Firefox 63 です。エッジ開発を開始しました

Shadow DOM の機能検出を検出するには、attachShadow が存在するかどうかを確認します。

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

ポリフィル

ブラウザサポートが広く利用可能になるまで、 shadydom と shadycss ポリフィルを使用して v1 を指定します。機能。Shady DOM は、Shadow DOM と shadycss のポリフィルの DOM スコープを模倣しています。 CSS カスタムプロパティとネイティブ API が提供するスタイルスコープ。

ポリフィルをインストールします。

bower install --save webcomponents/shadydom
bower install --save webcomponents/shadycss

ポリフィルを使用します。

function loadScript(src) {
    return new Promise(function(resolve, reject) {
    const script = document.createElement('script');
    script.async = true;
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
    });
}

// Lazy load the polyfill if necessary.
if (!supportsShadowDOMV1) {
    loadScript('/bower_components/shadydom/shadydom.min.js')
    .then(e => loadScript('/bower_components/shadycss/shadycss.min.js'))
    .then(e => {
        // Polyfills loaded.
    });
} else {
    // Native shadow dom v1 support. Go to go!
}

https://github.com/webcomponents/shadycss#usage をご覧ください。をご覧ください。

まとめ

初めて、適切な CSS スコープを設定する API プリミティブを利用できるようになりました。 DOM スコープ設定が適用されていて、真のコンポジションを持つ。他のウェブコンポーネント API と組み合わせる Shadow DOM は、カスタム要素と同様に、完全にカプセル化されたハッキングや <iframe> などの古いバッグの使用なしでコンポーネントを使用できます。

ただし、Shadow DOM は本当に複雑です。でも本当に学びます。少し時間を取ってください。使い方を学んで、質問しましょう。

よくある質問

現在、Shadow DOM v1 を使用できますか？

ポリフィルを使えば可能です。ブラウザのサポートをご覧ください。

Shadow DOM にはどのようなセキュリティ機能がありますか。

Shadow DOM はセキュリティ機能ではありません。CSS のスコープ設定に役立つ軽量のツールで、コンポーネント内の DOM ツリーを隠すことです真のセキュリティ境界が必要な場合は <iframe> を使用する。

ウェブコンポーネントでは Shadow DOM を使用する必要がありますか？

いいえ。Shadow DOM を使用するウェブコンポーネントを作成する必要はありません。ただし、 Shadow DOM を使用したカスタム要素を作成することで、 CSS スコープ、DOM カプセル化、コンポジションなどの機能が活用されています。

開いている Shadow ルートと閉じた Shadow ルートの違いは何ですか？

クローズドシャドウルートをご覧ください。