CSS Scoping Module Level 1

2.1. shadow DOM の説明

この節は規範的ではない。This section is non-normative.

この節では、 この仕様が何を定義しているかを［ DOM 標準 [DOM] を全部的に把握せずに理解する ］のを援助するため、 DOM が規範的に定義するいくつかの概念を説明する。 The following is a non-normative explanation of several concepts normatively defined in the DOM Standard [DOM], to aid in understanding what this spec defines without having to fully grok the DOM Standard.

[SELECTORS4] の § データモデル に定義される要素ツリーの各種特性に加え、 DOM 標準は，shadow ツリーに関係するいくつかの新たな概念を追加している。 うちいくつかは CSS にも関連する。 In addition to the qualities of an element tree defined in Selectors Level 4 § data-model, the DOM Standard adds several new concepts related to shadow trees, several of which are relevant to CSS.

要素 ホスト は、 ある shadow ツリー shadow ツリー をホストすることもある — その根である shadow 根 shadow 根 は、 特別な種類の文書片である（要素ノードではない）。 shadow 根 の子孫は、 普通の要素その他のノードからなる。 ホスト は、 shadow 根 のホストであり， 【 shadow ツリー をホストする】shadow ホストになる。 An element can host a shadow tree, which is a special kind of document fragment with a shadow root (a non-element node) at its root. Children of the shadow root are ordinary elements and other nodes. The element hosting the shadow tree is its host, or shadow host.

shadow ツリー 内の要素は、 一般に， ホスト の子孫ではない （子孫結合子の様な選択子の目的も含めて）。 しかしながら， shadow ツリー は、 ホスト が属するノードツリー（light ツリー） light ツリー における平坦ツリーの構築に利用される。 CSS においては、 この平坦ツリーが，選択子より後の すべての目的（継承やボックスの構築なども含む）に利用される。 The elements in a shadow tree are not descendants of the shadow host in general (including for the purposes of Selectors like the descendant combinator). However, the shadow tree, when it exists, is used in the construction of the flattened element tree, which CSS uses for all purposes after Selectors (including inheritance and box construction).

shadow ツリー は、 概ね，［ light ツリー における， ホスト の通常の内容 ］に代わって ホスト の内容として扱われる。 しかしながら，［ light ツリー における ホスト の子 ］も、 ある slot slot にあてがわれることにより， shadow ツリー の “中に引き込まれる” ことはある — そのような子は、 CSS の目的においては slot の子として扱われる。 さらには、 slot も，より深い shadow ツリー内の slot にあてがわれることもある。 幸いなことに，［ どの slot も，それ自身は既定ではボックスを生成しない ］ので、［ shadow ツリー を包装して CSS を遮断している slot 要素†のカスケード ］を作者が予測不能になることはない。 【†slot を作成できるのは、この型の要素に限られる。】 Loosely, the shadow tree is treated as the shadow host’s contents instead of its normal light tree contents. However, some of its light tree children can be "pulled into" the shadow tree by assigning them to slots. This causes them to be treated as children of the slot for CSS purposes. The slots can then be assigned to slots in deeper shadow trees; luckily, slots themselves don’t generate boxes by default, so you don’t get an unpredictable cascade of slot wrapper elements disrupting your CSS.

slot に何も明示的にあてがわれていない場合、 代わりに，slot の自前の子たちが “既定の” 内容としてあてがわれる。 If nothing is explicitly assigned to a slot, the slot’s own children are instead assigned to it, as a sort of "default" contents.

2.2. shadow DOM と選択子

:host( <compound-selector> )

<x-foo class="foo">
  <“shadow ツリー”>
    <div class="foo">...</div>
  </“shadow ツリー”>
</x-foo>

:host-context( <compound-selector> )

<x-foo>
  <div id="one" slot="foo" class="foo">...</div>
  <div id="two" slot="foo">...</div>
  <div id="three" class="foo">
    <div id="four" slot="foo">...</div>
  </div>
  <“shadow ツリー”>
    <div id="five">...</div>
    <div id="six">...</div>
    <slot name="foo"></slot>
  </“shadow ツリー”>
</x-foo>

2.3. shadow ツリーとカスケード

カスケード文脈 [CSS-CASCADE-4] を見よ。 See CSS Cascading 4 § 6.1 Cascade Sorting Order.

2.4. DOM から要素ツリーへの平坦化法

選択子は，ホスト言語が提示する DOM ツリーに対し演算するが、 CSS の他の部分が［ 標準な［ 親／子 ］関係性を介することでは到達不能な，別々なツリー ］に働くためには，単一化されたツリー構造が必要になる。 これは、 平坦化された要素ツリー （ flattened element tree ） — 略して，平坦ツリー（ flat tree ） — と呼ばれ，次に従って構築される 【この “平坦化” は、要素の入れ子ではなく，ツリーの入れ子を平坦化することを表す。】 ： While Selectors operates on the DOM tree as the host language presents it, with separate trees that are unreachable via the standard parent/child relationship, the rest of CSS needs a single unified tree structure to work with. This is called the flattened element tree (or flat tree), and is constructed as follows:

1. 根 :← 文書の根要素 ↓
2. 処理待ちノードリスト :← 新たなリスト — このリストは、 ( ノード, 親 ) が成すタプルとして与えられるアイテムたちで拡充されることになる。 Let pending nodes be a list of DOM nodes with associated parents,＼
3. 処理待ちノードリスト に ( 根, ε ) を付加する initially containing just the document’s root element with no associated parent.
4. 平坦ツリー :← 根 を根とする， 根 のみからなる新たな平坦ツリー ↓

5. WHILE［ 処理待ちノードリスト は空でない ］： Repeatedly execute the following substeps until pending nodes is empty:

   1. アイテム :← 処理待ちノードリスト[ 0 ] ↓
   2. 処理待ちノードリスト から アイテム を除去する Pop the first element from pending nodes, and assign it to pending node.
   3. ノード :← アイテム の ノード ↓
   4. IF［ ノード ≠ 根 ］ ：ノード を［ アイテム の 親 の子 ］として 平坦ツリー の中へ挿入する Insert pending node into the flat tree as a child of its associated parent.＼(If it has no associated parent, it’s the document root—just insert it into the flat tree as its root.)

   5. IF［ ノード は shadow ホストである ］： Perform one of the following, whichever is the first that matches:pending node is a shadow host

      1. ノード がホストしている shadow ツリーの shadow 根の子群を成す 各 ( 子ノード ) に対し ：処理待ちノードリスト に ( 子ノード, ノード ) を付加する Append the child nodes of the shadow root of the shadow tree it hosts to pending nodes, with pending node as their associated parent.
      2. CONTINUE

   6. IF［ ノード は slot である ］：

      1. slot 可能リスト :← slot 用に slot 可能なものを見出す( ノード )

      2. IF［ slot 可能リスト は空でない ］：

         1. slot 可能リスト を成す 各( slot 可能 ) に対し ：処理待ちノードリスト に ( slot 可能, ノード ) を付加する
         2. CONTINUE
      pending node is a slotFind slottables for pending node, and append them to pending nodes, with pending node as their associated parent.↓If no slottables were found for pending node, instead append its children to pending nodes, with pending node as their associated parent.
   7. ノード の（light ツリーにおける）子群を成す 各( 子 ) に対し ：処理待ちノードリスト に ( 子, ノード ) を付加する Otherwise,Append the child nodes of pending node’s light tree to pending nodes, with pending node as their associated parent.

これによる明白でない結果は、 slot にあてがわれた要素は、 その slot から【スタイルを】継承することである — 要素の light ツリーにおける親や, その slot があてがわれている より深い slot でなく。 このことは、 【 slot にあてがわれた】テキストノードは、 その親の shadow ツリーによりスタイルされ，他からはどうやっても介入できないことを意味する。 そのようなテキストノードをターゲットする追加の疑似要素は，求まれるか？ — それらにも，要素のときと同様に slot にあてがわれた下でスタイルできるよう。 このことは、 light ツリー内のテキストノードに対しても，slot にあてがわれる前に，そのような疑似要素が働く必要があることを含意する。 なので、 これは，ただの ::slotted() の変種にはなり得ない。 Luckily, this is a long-standing request!【何が Luckily？】 A non-obvious result of this is that elements assigned to a slot inherit from that slot, not their light-tree parent or any deeper slots their slot gets assigned to. This means that text nodes are styled by the shadow tree of their parent, with nobody else capable of intervening in any way. Do we want an additional pseudo-element for targeting those text nodes so they can be styled at all slot-assignment levels, like normal elements can be? This implies it needs to work for text nodes in the light tree before they’re assigned downwards, so this can’t just be a ::slotted() variant. Luckily, this is a long-standing request!

2.5. 名前を定義する構成子と継承

shadow ツリーは、 カプセル化の境界になること — 独立な作者たちが、 互いの名前空間を不用意に汚すことなくコードを共有するのを許容すること — が意図される。 例えば要素 ID は、 一般に，文書の中で一意になることが意図されるが、 異なる shadow ツリー内であれば，複数回利用されても妥当になる。 Shadow trees are meant to be an encapsulation boundary, allowing independent authors to share code without accidentally polluting each other’s namespaces. For example, element IDs, which are generally meant to be unique within a document, can be validly used multiple times as long as each use is in a different shadow tree.

同様に，CSS における at-規則のうちいくつか — @keyframes や @font-face など — は、［ プロパティ／他の at-規則 ］が［ 後で，それを参照できる名前 ］を定義する。 これらの名前は，ID の様に［ 大域的に公開され，同じ文書の中で一意になる ］が、 この制約もまた，今や ID の様に［ 所与の shadow ツリーの中で一意になる ］よう緩められる。 Similarly, several at-rules in CSS, such as @keyframes or @font-face, define a name that later at-rules or properties can refer to them by. Like IDs, these names are globally exposed and unique within a document; also like IDs, this restriction is now loosened to being unique within a given shadow tree.

しかしながら，プロパティ継承は、 あるツリーから別のツリーへ値を運ぶこともあるため，所与の名前から正しい定義への参照法は複雑化する。 これは，素朴に行われた場合、 作者を［ 驚かす／惑わす ］結果を生産し得る。 この節では、 “大域的” な名前を — カプセル化を尊重して，驚かす結果を与えない仕方で — ［ 定義する／参照する ］ときに利用される概念を定義する。 However, property inheritance can carry values from one tree to another, which complicates referencing the correct definition of a given name. Done naively, this can produce surprising and confusing results for authors. This section defines a set of concepts to use in defining and referencing "global" names in a way that respects encapsulation and doesn’t give surprising results.

［ at-規則／プロパティ ］のうち，他の CSS 構成子から参照できる名前 （例： @font-face の font-family に与える名前, @keyframes に与える名前） を定義するものは、 それを ツリー視野な名前 （ tree-scoped name ） — その視野は あるツリーに絞られる名前 — として定義しなければならない。 ツリー視野な名前は、 他が指定されない限り，ある特定のノードツリーの中で “大域的” になり、 当の［ at-規則／プロパティ ］を定義したスタイルシートをホストしている要素の根が結び付けられる。 If an at-rule or property defines a name that other CSS constructs can refer to it by, such as a @font-face font-family name or an @keyframes name, it must be defined as a tree-scoped name. Tree-scoped names are "global" within a particular node tree; unless otherwise specified, they’re associated with the root of the element hosting the stylesheet that the at-rule or property is defined in.

“大域的” な名前を参照する［ プロパティ／記述子 ］ （例： font-family, animation-name ） は、 その値を ツリー視野な参照 （ tree-scoped reference ） — その視野は あるツリーに絞られる参照 — として定義しなければならない。 ツリー視野な参照は、 指定された値とともに，暗黙的にノードツリーの根を捕捉する — それは、 他が指定されない限り，当の［ プロパティ／記述子 ］が定義されているスタイルシートをホストしている要素の根になる。 この［ 根への参照 ］は、 継承されてもツリー視野な参照に伴い続ける。 Properties or descriptors that reference a "global" name, such as the font-family or animation-name properties, must define their value as a tree-scoped reference. Tree-scoped references implicitly capture a node tree root along with their specified value: unless otherwise specified, the root of the element hosting the stylesheet that the property or descriptor is defined in. This root reference stays with the tree-scoped reference as it is inherited.

ツリー視野な参照 参照 を［ それが参照している CSS 構成子を見出すために参照解決する所 ］では、 まず，ツリー視野な名前のうち［ それに結び付けられた根が 参照 に結び付けられた根と同じになるもの ］に限り探索するものとする — 該当するツリー視野な名前は見出されなかった場合、 参照 に結び付けられた根は shadow 根であるならば，根のホストが属するノードツリー内でこの探索を繰り返すとする （言い換えれば、 ツリー視野な名前は，子孫 shadow ツリーの中へ — 子孫ツリー自身が同じ名前を定義していない限り — “継承される” ）。 Whenever a tree-scoped reference is dereferenced to find the CSS construct it is referencing, first search only the tree-scoped names associated with the same root as the tree-scoped reference must be searched. If no relevant tree-scoped name is found, and the root is a shadow root, then repeat this search in the root’s host’s node tree. (In other words, tree-scoped names "inherit" into descendant shadow trees, so long as they don’t define the same name themselves.)

<p class=outer>

ここでは、
light ツリーの "foo" フォントが利用される。
Here's some text in the outer document's "foo" font.
</p>
<style>
  @font-face {
    font-family: foo;
    src: url(https://example.com/outer.woff);
  }
  body { font-family: foo; }
  my-component::part(text) { font-family: foo; }
</style>

<my-component>
  <::shadow>
    <p class=inner-default>

これは、
light ツリーの font-family を継承している。
I'm inheriting the outer document's font-family.
    </p>
    <p class=inner-styled>

ここでは、
my-component 内の "foo" フォントを利用するよう，明示的にスタイルされる。
And I'm explicitly styled to be in the component's "foo" font.
    </p>
    <p class=part-styled part=text>

これは、
light ツリーにより明示的にスタイルされ，
light ツリーから "foo" フォントを取得する。
I'm explicitly styled by the outer document, and get the outer document's "foo" font.
    </p>
    <style>
      @font-face {
        font-family: foo;
        src: url(https://example.com/inner.woff);
      }
      .inner-styled { font-family: foo; }
    </style>
  </::shadow>
</my-component>

<style>
  @font-face {
    font-family: foo;
    src: url(https://example.com/outer.woff);
  }
  body { font-family: foo; }
</style>

<child-component>
  <::shadow>
    <style>
      @font-face {
        font-family: foo;
        src: url(https://example.com/inner.woff);
      }
    </style>

    <grandchild-component>
      <::shadow>
        <p class=inner-default>

これは、
light ツリーの "foo" フォント を継承している。
I’m inheriting the outer document’s "foo" font.
        </p>
        <p class=inner-search>

局所的な "foo" フォントは見出せなかったので、
ツリーをさらに遡るよう探索した結果，shadow の "foo" フォントが見出される。
And I can’t find a local "foo" font, so I’m searching further up the tree, and find the shadow’s "foo" font.
        </p>
        <style>
        .inner-search { font-family: foo; }
        </style>
      </::shadow>
    </grandchild-component>
  </::shadow>
</child-component>

<p class=outer>

ここでは、
light ツリーの "foo" フォントが利用される。
Here’s some text in the outer document’s "foo" font.
</p>
<style>
  @font-face {
    font-family: foo;
    src: url(foo.woff);
  }
  body { font-family: foo; }
</style>

<my-component>
  <::shadow>
    <p class=inner-default>

これは、
light ツリーの font-family を継承している。
I'm inheriting the outer document's font-family.
    </p>
    <p class=inner-styled>

ここでは、
my-component 内の "foo" フォントを利用するよう，明示的にスタイルされる。
And I'm explicitly styled to be in the component's "foo" font.
    </p>
    <style>
      @font-face {
        font-family: foo;
        src: url(https://example.com/foo.woff);
      }
      .inner-styled { font-family: foo; }
    </style>
    <script>
      const innerDefault = document.querySelector('.inner-default');
      const innerStyled = document.querySelector('.inner-styled');
      const defaultFont = getComputedStyle(innerDefault).fontFamily;
      const styledFont = getComputedStyle(innerStyled).fontFamily;

      console.log(defaultFont == styledFont); // true!
    </script>
  </::shadow>
</my-component>