CSS スコープ

CSS スコープモジュールは、シャドウ DOM のスコープ機構を中心に、 CSS のスコープとカプセル化の機構を定義します。

CSS スタイルには、グローバルスコープと、シャドウツリーのスコープがあります。グローバルスコープのスタイルは、セレクターに一致するノードツリー内のすべての要素に適用され、そのツリー内のカスタム要素も含まれますが、各カスタム要素を構成するシャドウツリーには適用されません。セレクターとそれに関連するスタイル定義は、スコープ間で滲み出ることはありません。

シャドウツリーの CSS 内では、セレクターはツリーの外にある要素、つまりグローバルスコープ内や他のシャドウツリー内の要素を選択することはありません。各カスタム要素は自分自身でシャドウツリーを持っており、そのシャドウツリーにはカスタム要素を構成するすべての部品が格納されています（カスタム要素、つまり「ホスト」そのものは格納されていません）。

シャドウツリーコンテキストの内部からホストのスタイル設定ができると有益なことがあります。CSS スコープモジュールは、これを可能にするセレクターを定義します。

• シャドウツリーがそのホストをスタイル設定できるようにします。
• 外部 CSS でシャドウ DOM 内の要素にスタイルを設定できるようにします（ただし、関連するカスタム要素が外部スタイルを受け入れるように設定されている場合に限ります）。