CSS部品の有効な名前

CSS Shadow Parts , CSSパーツとして知られているCSSは、CSSで消費者によってスタイルを整えることができるように、Webコンポーネントのシャドウルート内の要素を公開するために使用されます.しかし、我々はこれらの部品を呼び出すことができますか?どのような文字が有効なCSSの部品名を構成する?見つけるためにdive into the spec !

The part attribute is parsed as a space-separated list of tokens representing the part names of this element.

が、正確に“トークンは何ですか?”このページからは明らかではありませんが、そのためのスペックを見ればヒントを得ます ::part() pseudo selector :

::part() = ::part( <ident> )

それは<ident> , それが何であれ.幸いにもa link to it それは、それを定義するページに我々を連れて行きます.

CSS identifiers, generically denoted by <ident>, consist of a sequence of characters conforming to the <ident-token> grammar.

パーフェクト!したがって、部品名は<ident-token> 文法、しかし、それは何ですか?リンクをフォローしましょう <ident-token> 要するに
そのページから

<ident-token> [...] have a value composed of zero or more code points. Additionally, hash tokens have a type flag set to either "id" or "unrestricted". The type flag defaults to "unrestricted" if not otherwise set.

それは、ああ、超便利ではない.“コードポイント”の周りにリンクがあるので、それが明確になるかどうかを確認してみましょう.リンクはthis page :

A code point is a Unicode code point and is represented as "U+" followed by four-to-six ASCII upper hex digits, in the range U+0000 to U+10FFFF, inclusive. A code point’s value is its underlying number.

しかし、それはかなり広い範囲のようです.According to Wikipedia:

The last code point in Unicode is the last code point in plane 16, U+10FFFF.

これは、私たちがどんなUnicodeキャラクタもCSS部品名として使うことができることを意味しますか?私はUnicodeのエキスパートではないので、まだはっきりしていません.

様々な文字で実験する
ブラウザで実際に動作するものを試してみましょう.カスタム要素を次のパーツで作成し、スタイルを試してみました::part() 何が実際に働いているかを見るために.

✅ part="a"
✅ part="a-b"
✅ part="a_b"
❌ part="a,b"
❌ part="a.b"
❌ part="a$b"
❌ part="a+b"
❌ part="a@b"
❌ part="a?b"

明らかに我々は部品名の文字を使用することはできません.ブラウザは、正直であることを直感的な感じのシンボルが好きではありません.
もう少し試してみましょう.

✅ part="á"
✅ part="ñ"
✅ part="ę"
✅ part="Ф"
✅ part="平"
✅ part="λ"
✅ part="ה"
✅ part="字"

非句読点でOKであるようです.何Emojis?

✅ part="🥕"
✅ part="🐛"
✅ part="🐓"
✅ part="💩"
✅ part="🤨"

全くすばらしい.それで、句読点以外のどんな性格も良いようです.下のUnicodeの範囲をチェックしましょう
Here's a document を指定します.これは、我々が以前にこの範囲で試みたシンボルの数をリストします.🥲
明らかに、この範囲は有効なCSS部品名を反映しません.たぶん、私たちはspecの何かを見落としました、あるいは、多分、CSS仕様はあまりに一般的に引数を定義します.確かにthe HTML spec 説明します.
おっと…の言及はないpart すべての属性.😭
かどうか見ましょうthis MDN page 我々は物事をクリアすることができます.

A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element.

が、有効な部品名は何ですか?

救出へのMDN
私はまだ何が仕様ごとに正しいかわからない.見てみましょうthe ::part() docs 現在MDNで.私は、私たちがスペックで見たもののように見えますこれを見つけました!

::part( `<ident>+` )

そこにリンクがある<ident> それでto this page , これは

これまで、MDNは有効なidentが何であるか、そして、したがって、有効なCSS部品名が何であるかという最も人間に読める説明を提供しました.以下に、有効な文字のランダウンを示します.

エー・Z

0 - 9

ハイフン

アンダースコア

エスケープチャー

16進形式のUnicode文字

これはなぜ私の句読点の例がうまくいかなかったかを説明します.おもしろいことがありますが、

an escaped character (preceded by a backslash, )

それで、我々はどんな性格を使うことができますか?もう一度動作しない句読点で試してみましょう.

<div part="a.b">

CSSでそれをターゲットにしましょう.

::part(a\.b) {
  ...
}

動く!したがって、スペックは技術的にはどんな文字も使用できるという点で正しいです、それはちょうどそれらのいくつかがエスケープされる必要があるという点で明確でありませんでした.
チェックアウト:

<div part="a.b{c}|d">

とCSS

::part(a\.b\{c\}\|d) {
  ...
}

この作品も!

パーツをターゲットに
これまで、私は、私が露出したかった各々の要素のために、1つの部分を1部で使用しました.しかしper the spec , 部品はクラスのように使われるべきです:

Part names act similarly to classes: multiple elements can have the same part name, and a single element can have multiple part names.

私は、私が部品を使う方法を変えるべきであると思います.私はそれらを識別子として考えていました、しかし、specがギャップを埋めるのを助けることができるように、彼らがクラスのようにより多くのことを考えること!
私がアンダースコアが有効であるということを知った今、私はホヴァー/フォーカス/アクティブな状態のための慣例として、彼らを決して見つけません::state セレクタ.例えば、部品に合成フォーカス状態を与えることができます.

<div part="control control_focus">

この慣例では、おそらく我々は必要はありません::state セレクタのすべての後!

あなたがそうすることができるので
それで、あなたはそれを持ちます.あなたは何をしたいCSSの部品の名前を付けることができます-ちょうど特別な文字をエスケープしてください!前の例を使用して、我々もすべての文字を削除することができますし、記号だけで部品名を作る!

<div part=".{}|">

しかし、セレクタは少し狂ったようになります.

::part(\.\{\}\|) {
  /* 😎 */
}

私はすべての現代のブラウザーでこれをテストしました、そして、それは一貫して働くようです.もちろん、これは非常に実用的ではありません.あなたのユーザーのために、私はこのようにあなたのCSSパーツを命名することを忠告します!🙈
ここで特殊文字が役に立ちますか?多分、内部のパターンのために、しかし、私は私がそれを公開APIの一部として公開すると思いません.ユーザーは間違いなく自分のスタイルシートの文字をエスケープすることを忘れないでください.私の部品については、おそらくA - Zを使用し続け、ほとんどの時間をダッシュします.
この投稿は当初公表されたthe author's blog .