1. このページの目的
CSS Shadow Parts を試す。
2. CSS Shadow Parts を使わない場合のデモ
CSS Shadow Parts を使わない場合、外部から Shadowツリー内の要素にスタイルを適用することができないか試す。
ソースコード：demo-ex1.js, main.css
出力結果
- 赤色になっていないということは、スタイルが適用できなかった。
- Shadowツリー内の要素に対して、外からCSSを適用することはできない。
3. CSS Shadow Parts を使う場合のデモ (カスタムタグ1階層)
CSS Shadow Parts の EXAMPLE 1 と同等のコードを試す。
Shadowツリー内の要素に対して、外部からスタイルを適用する。カスタムタグは1階層しかない場合。
ソースコード：demo-ex2.js, main.css
出力結果
part属性、exportparts属性、::part()疑似要素を利用し、Shadowツリー内の要素に対して、外からCSSを適用することができた。
4. CSS Shadow Parts を使う場合のデモ (カスタムタグ2階層)
CSS Shadow Parts の EXAMPLE 2 のコードを試す。
カスタムタグは2階層になっている。
(カスタムタグ内のカスタムタグ)内の要素に対して、外部からスタイルを適用する。この際、part属性に元々付けた名前ではない名前を使ってスタイルを指定する(exportparts属性で変換可能)。
ソースコード：demo-ex3-inner.js, demo-ex3-outer.js, main.css
出力結果
5. メモ
- CSS Shadow Parts の記述が分かりづらい。但し、内容は割と少ない。
- CSS Shadow Parts の EXAMPLE 2 というコードには、一箇所間違いがある。6行目の「
exportparts="innerspan textspan"」は「exportparts="innerspan:textspan"」のはずである。そうでないと赤色が正しく反映されない。