CSS Shadow Parts

1. 序論

~shadow~DOMは、 ~pageをいくつかの “~component” — ~markupが成す下位treeであって、 その詳細は，外側~pageでなく~component自身に限り関連なもの — に分離することを，作者に許容する。 これは、［ ~pageを成す ある~part用に意味された ある~styleが，不用意に適用され過ぎて、 ~pageの異なる~partの見かけをおかしくする機会c ］を抑制する。 しかしながら，この~style付け防壁により、 ~pageが~componentとヤリトリすることも難しくなる — 実際にそうするよう`求まれた^emときに。 ◎ Shadow DOM allows authors to separate their page into "components", subtrees of markup whose details are only relevant to the component itself, not the outside page. This reduces the chance of a style meant for one part of the page accidentally over-applying and making a different part of the page look wrong. However, this styling barrier also makes it harder for a page to interact with its components when it actually wants to do so.

この仕様は、 `part()$pe 疑似要素を定義する。 それは、 作者が［ `~shadow~tree$内にある，ある目的で公開された特定の要素 ］を［ 外側~pageの文脈から~styleする ］ことを許容する。 これらの疑似要素は、 `~custom~prop$ （それは、 外側~pageが，自身の好きなように特定0の値（~theme色など）を~componentに渡せるようにする） と組合せることにより — ~capsule化を保守しつつ，すべての制御をあきらめることなく — ~componentと外側~pageが安全かつ強力な仕方でヤリトリすることを許容する。 ◎ This specification defines the ::part() pseudo-element, which allows an author to style specific, purposely exposed elements in a shadow tree from the outside page’s context. In combination with custom properties, which let the outside page pass particular values (such as theme colors) into the component for it to do with as it will, these pseudo-elements allow components and the outside page to interact in safe, powerful ways, maintaining encapsulation without surrendering all control.

1.1. 動機

~custom要素の能力が — 組込みの要素と同程度に — 全部的に有用になるためには、 次がアリになるベキである ⇒＃ 要素を成す各~partを外側から~styleすること／ ~custom要素の作者が，外側から正確に何を~styleできるか制御すること／ ~custom要素が~style付け用に安定的な “~API” を呈示すること ◎終 すなわち、 ~custom要素を成す ある~partを~styleするために利用される選択子は、 要素の内部的な詳細~についての知識を［ 公開する／要求する ］ベキでない。 ~custom要素の作者は、 選択子には触れずに，要素の内部的な詳細を変更-可能になるベキである。 ◎ For custom elements to be fully useful and as capable as built-in elements it should be possible for parts of them to be styled from outside. Exactly what can be styled from outside should be controlled by the element author. Also, it should be possible for a custom element to present a stable "API" for styling. That is, the selector used to style a part of a custom element should not expose or require knowledge of the internal details of the element. The custom element author should be able to change the internal details of the element while leaving the selectors untouched.

~shadow~treeの内側に対する~style付け用として以前に提案された結合子 `~gt3^css 【“~shadowを貫く結合子” 】 は、 `強力~過ぎて^em~~元も~~子もないことが~~判明した — それは、［ ~componentの内部~構造を微細にわたり公開し過ぎる ］ため，［ `Shadow DOM^cite を利用することで得られる~capsule化の便益 ］の一部を無為にしていた。 この理由から, および他の処理能に関係する理由から、 `~gt3^css 結合子は最終的に `live profile^en† から除去された。 【†この用語は `SELECTORS-4$r 仕様から廃された。】 ◎ The previous proposed method for styling inside the shadow tree, the >>> combinator, turned out to be too powerful for its own good; it exposed too much of a component’s internal structure to scrutiny, defeating some of the encapsulation benefits that using Shadow DOM brings. For this, and other performance-related reasons, the >>> combinator was eventually removed from the live profile.

唯一残された，~shadow~treeの中まで~styleする仕方は、 `~custom~prop$を利用することである： ~componentは、［ 一定の`~custom~prop^を利用して，自身の内部を~styleする ］よう広告する — 外縁~pageは、 自身が望む~propを`~shadow~host$上に設定することができ， 値を必要な所まで奥深く継承させられる。 これは、 多くの単純な~theme法の利用事例には，とても上手く働く。 ◎ This left us with using custom properties as the only way to style into a shadow tree: the component would advertise that it uses certain custom properties to style its internals, and the outer page could then set those properties as it wished on the shadow host, letting inheritance push the values down to where they were needed. This works very well for many simple theming use-cases.

しかしながら，これでは立ち往かない事例もある。 ある~componentが［ 自身の~shadow~tree内の何かに任意な~style付けを許容したい ］と望む場合、 何百もの`~custom~prop$を定義する他に仕方がない （制御を許容したいと望む~CSS~propごとに 1 個ずつ） — それは、 利用性, 処理能の両面で明白に馬鹿げている。 この状況は、 作者が~componentの~styleを `hover$ps の様な疑似類に基づいて違えたいと望む場合， さらに複合される — ~componentは、 利用する`~custom~prop^を各~疑似類~用に重複する必要がある （ `:hover:focus^css の様な各~組合nごとに必要なので、 組み合わせは膨大になる）。 これは、 利用性と処理能の問題をさらに悪くする。 ◎ However, there are some cases where this falls down. If a component wishes to allow arbitrary styling of something in its shadow tree, the only way to do so is to define hundreds of custom properties (one per CSS property they wish to allow control of), which is obviously ridiculous for both usability and performance reasons. The situation is compounded if authors wish to style the component differently based on pseudo-classes like :hover; the component needs to duplicate the custom properties used for each pseudo-class (and each combination, like :hover:focus, resulting in a combinatorial explosion). This makes the usability and performance problems even worse.

`part()$pe は、 この事例を ずっと~elegantかつ高処理能に取扱うために導入される。 `~custom~prop$名の中に何もかも束ねるのでなく、 機能性は，元々意味された様に選択子と~style規則~構文~内に生き続ける。 これは、 ~componentの作者, その利用者どちらからも，ずっと利用し易くなることに加え、 処理能はずっと良くなるはずであり， より良い［ ~capsule化／~API表面化 ］を許容する。 ◎ We introduce ::part() to handle this case much more elegantly and performantly. Rather than bundling everything into custom property names, the functionality lives in selectors and style rule syntax, like it’s meant to. This is far more usable for both component authors and component users, should have much better performance, and allows for better encapsulation/API surface.

`part()$pe は、 `理論的には，新たな力は何ら提供しない^emことに注意。 それは， `~gt3^css 結合子の焼き直しではなく、 作者が`~custom~prop$ですでに行える何か用の［ 単純で, より簡便で, 一貫した構文 ］である。 要素を成すある~part（`~part要素~map$）を明示的に “公表して”， 単に包含されるだけの下位-~partから分け隔てることは、 ~capsule化の一助にもなる — 作者は、 不用意に~styleし過ぎるおそれなしに `part()^pe を利用できるので。 ◎ It’s important to note that ::part() offers absolutely zero new theoretical power. It is not a rehash of the >>> combinator, it is simply a more convenient and consistent syntax for something authors can already do with custom properties. By separating out the explicitly "published" parts of an element (the part element map) from the sub-parts that it merely happens to contain, it also helps with encapsulation, as authors can use ::part() without fear of accidental over-styling.

2. ~shadow要素の公開-法

`~shadow~tree$内の要素は、［ `part$a, `exportparts$a ］属性を利用して，~treeの外側へ — ~stylesheetによる~style付け用に — ~exportできる。 ◎ Elements in a shadow tree may be exported for styling by stylesheets outside the tree using the part and exportparts attributes.

各~要素は、 次のものを持つ： ◎ ↓

`~part名~list@ 【 `part$a 属性で拡充される】 ◎ Each element has a part name list＼

~tokenたちが成す`有順序~集合$。 ◎ which is an ordered set of tokens.

`回送される~part名~list@ 【 `exportparts$a 属性で拡充される】 ◎ Each element has a forwarded part name list＼ Each element has a part name map＼

［ ( 【外縁へ】回送される内縁~part用の`文字列$, 公開される名前を与える`文字列$ ) が成す`~tuple$ ］たちを包含している`~list$。 ◎ which is a list of pairs containing a string for the inner part being forwarded and a string giving the name it will be exposed as.

各 `~shadow根$は、 `~part要素~map@ を持つとみなせる — それは、［ `文字列$である~key ］を［ 要素たちが成す`有順序~集合$である値 ］に対応付ける。 ◎ Each shadow root can be thought of as having a part element map with keys that are strings and values that are ordered sets of elements.

`~part要素~map$は、 この仕様にて~styleを計算するための~algoの一部としてのみ述べられる — この~mapを計算することは、 高価にもなり得るので 【実装には，実際に必要になるまで計算しない裁量の余地がある】 。 それはまた、 ~DOMを介して公開されることはない — 公開すると、 閉な~shadow根の内側にある要素への~accessを許容するので。 ◎ The part element map is described only as part of the algorithm for calculating style in this spec. It is not exposed via the DOM, as calculating it may be expensive and exposing it could allow access to elements inside closed shadow roots.

`~part要素~map$は、 要素の追加や除去, および~DOM内の要素の［ `~part名~list$／`回送される~part名~list$ ］に対する変更により影響される。 ◎ Part element maps are affected by the addition and removal of elements and changes to the part name lists and forwarded part name lists of elements in the DOM.

<style>
  c-e`::part(textspan)^mk { color: red; }
</style>

<template id="c-e-template">
  <span `part="textspan"^mk>
この~textの色は `red^v になる
◎
This text will be red
</span>
</template>
<c-e></c-e>
<script>
  /* 
`template^e を，~custom要素 `c-e^e として追加する
◎
Add template as custom element c-e
 */
  ...
</script>

<style>
  c-e`::part(textspan)^mk { color: red; }
</style>

<template id="c-e-outer-template">
  <c-e-inner `exportparts="innerspan: textspan"^mk></c-e-inner>
</template>

<template id="c-e-inner-template">
  <span `part="innerspan"^mk>
    
この~textの `color^p は `red^v になる
— 包含している~shadow~hostは，
`innerspan^v を `textspan^v として文書へ回送し，それは文書~styleに合致するので。
◎
This text will be red because the containing shadow host forwards innerspan to the document as "textspan" and the document style matches it.

  </span>
  <span `part="textspan"^mk>
    
この~textの `color^p は `red^v にならない
— 文書~style内の `textspan^v は、
回送されない場合には，内縁~custom要素の内側にある~partには合致し得ないので。
◎
This text will not be red because textspan in the document style cannot match against the part inside the inner custom element if it is not forwarded.

  </span>
</template>

<c-e></c-e>
<script>
  /* 
各 `template^e を，~custom要素 `c-e^e, `c-e-inner^e として追加する。
◎
Add template as custom elements c-e-inner, c-e-outer
 */
    ...
</script>

3. ~shadow要素の選択-法： `part()^pe 疑似要素

`part()@pe 疑似要素は、 `part$a 属性を介して公開された要素を選択することを，作者に許容する。 その構文は： ◎ The ::part() pseudo-element allows you to select elements that have been exposed via a part attribute. The syntax is:

::part() = ::part( `ident$t+ )

`part()$pe 疑似要素は、［ その`出自の要素$ %~host は`~shadow~host$である ］場合に限り，次を満たす %要素 に合致する（他の要素には合致しない） ⇒ %要素, および［ %~host が~hostしている`~shadow根$の`~part要素~map$ %~map ］は、 指定されたどの `ident$t %ident に対しても，次を満たす ⇒ ［ %~map[ %ident ] ~NEQ ε ］~AND［ %要素 ~IN %~map[ %ident ] ］ ◎ The ::part() pseudo-element only matches anything when the originating element is a shadow host. If the originating element’s shadow root’s part element map contains all of the specified <ident>s, ::part() matches the element or elements keyed to that <ident>. Otherwise, it matches nothing.

`part()$pe 疑似要素は、 その後に追加的な疑似類もとれる — `x-button::part(label):hover^css など — が、 局所的な要素~情報ではなく~tree情報に基づいて合致するような［ `構造上の疑似類$その他の疑似類 ］には，決して合致しない。 ◎ The ::part() pseudo-element can take additional pseudo-classes after it, such as x-button::part(label):hover, but never matches the structural pseudo-classes or any other pseudo-classes that match based on tree information rather than local element information.

`part()$pe 疑似要素は、 その後に追加的な疑似要素もとれる — `x-button::part(label)::before^css など — が、 追加的な `part()^pe には，決して合致しない。 ◎ The ::part() pseudo-element can also take additional pseudo-elements after it, such as x-button::part(label)::before, but never match additional ::part()s.

4. `Element^I ~interfaceに対する拡張

partial interface `Element$I {
  [`SameObject$, `PutForwards$=`value$m] readonly attribute `DOMTokenList$I `part$m;
};

`part$m

取得子は、 次のようにされた `DOMTokenList$I ~objを返すモノトスル ⇒＃ `要素$tL ~SET コレ, `属性の局所~名$tL ~SET `part^l ◎ The part attribute’s getter must return a DOMTokenList object whose associated element is the context object and whose associated attribute’s local name is part.＼

この特定0の `DOMTokenList^I ~objを成す~token集合は、 要素の `parts^en とも称される。 ◎ The token set of this particular DOMTokenList object are also known as the element’s parts.

これを~DOM仕様における `superglobal^en 【すべての名前空間より上位の大域~属性】として定義する。 [`3424$issue] ◎ Define this as a superglobal in the DOM spec. [Issue #w3c/csswg-drafts#3424]

5. 構文解析~用の小構文