↑

CSS3

：

疑似要素

：

::part()

　編集：2022.07.09 by T.A.

→●、mdn

shadow 要素の選択法。

E::part(<ident>+)

`E`	該当させる要素。
`<ident>`

::part()

::part( <ident>+ )

::part() 疑似要素は、part 属性を介して公開された要素を選択することを、作者に許容する。

::part() 疑似要素は、［その出自の要素ホストは shadow ホストである］場合に限り、次を満たす要素に合致する（他の要素には合致しない）：

要素、および［ホストがホストしている shadow 根の part 要素マップ］は、指定されたどの <ident> ident に対しても，次を満たす：

［マップ[ident] ≠ ε］∧［要素 ∈ マップ[ident]］

例えば、あるカスタムボタン（id="special-button"）が、スタイル付け用に（part="label" を介して）公開される "label" 要素を【そのボタンがホストしている shadow ツリー内に】包含する場合、作者は， #special-button::part(label) でそれを選択できる。

part 名たちは、クラスと同様に動作する：複数の要素が同じ part 名を持てる／単独の要素が複数個の part 名を持てる。

タブ切り替えコントロールを成す要素たちに part="tab" を伴わせれば、そのすべては ::part(tab) により選択される。

いっときに“active”になるタブは一つだけならば、特別に part="tab active" で指示した上で、::part(tab active) により選択できる（順序は関わらないので、::part(active tab) でも選択できる）。

¶省く

以下のCSSが組み込んであります：

Test::part(TestPart){
  box-shadow:#faa 5px 5px;
}

<TEMPLATE id=Test style="border:1px solid black; width:200px;
 display:flex;
">開始
 <SPAN part="TestPart">テスト</SPAN>
終了</TEMPLATE>
<Test></Test>

mdnの資料解らず

テスト

別画面に表示させて。

HTML：

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>CSS3：テスト</TITLE>
<STYLE>
::part(textspan) { color: red; }
</STYLE>
</HEAD>
<BODY>
<template id="c_e_template">
  <span part="textspan"> このテキストの色は red になる </span>
</template>
<c-e></c-e>
<DIV id=IdDIV></DIV>
<script>
  IdDIV.innerHTML=c_e_template.innerHTML;
</script>

<IFRAME id=IdIFRAME src="../Sample/IFRAME_FullScreen.htm"></IFRAME>
<BUTTON onclick="IdIFRAME.requestFullscreen()">フルスクリーン</BUTTON>
<DIV><SPAN>[SPAN要素]</SPAN>
</DIV>
<DIV>[DIV<SPAN>[SPAN要素]</SPAN>DIV]
</DIV>
<DIV>[DIV<SPAN>[SPAN要素]</SPAN>あああ<SPAN>[SPAN要素]</SPAN>DIV]
</DIV>
<TABLE>
 <TR><TH>TH要素：１<TD>TD要素：２<TD>TD要素：３
 <TR><TH>TH要素：４<TD>TD要素：５<TD>TD要素：６
 <TR><TH>TH要素：７<TD>TD要素：８<TD>TD要素：９
</TABLE>
<DIV><SPAN>SPAN要素<B>B要素</B></SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<DIV><SPAN>SPAN要素<B>B要素</B></SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<DIV>DIV要素<SPAN>SPAN要素<B>B要素</B></SPAN>だ<B>っち</B>ゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<SPAN>SPAN要素<B>B要素</B></SPAN>
<P> </P>
あ
<P></P>
<INPUT max=10 type=number><BR>
<PROGRESS value="0.5"></PROGRESS><BR>
<INPUT type=radio required name=Test1>
<INPUT type=radio name=Test1><BR>
<SELECT >
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<SELECT required>
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<AUDIO id=IdAUDIO src="../Sample/PCOto.mp3" controls></AUDIO><BR>
<SCRIPT>
IdAUDIO.muted=true;
</SCRIPT>
<A href="#Aテスト">A要素</A><BR>
<A href="#Aテスト2">A要素2</A><BR>
<DIV lang="de">DIV要素</DIV>
<FORM>
<INPUT type=radio name=Test>
<INPUT type=radio name=Test>
</FORM>
<INPUT value="ここに入力"><BR>
<INPUT value="ここに入力" readonly><BR>
<DIV>DIV要素ですんちゃ、<SPAN>SPAN要素</SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。</DIV>
<SPAN>SPAN要素</SPAN>This as pen.
<BUTTON>BUTTON要素</BUTTON>
<BUTTON disabled>BUTTON要素</BUTTON><BR>
<A id=Aテスト>A要素ジャンプ先</A><BR>
<A id=Aテスト2>A要素<SPAN>SPAN要素ジャンプ先</SPAN></A><BR>
</BODY>
</HTML>

ここに表示

¶[Edge]✖？

ここに表示

スクリプト：

スクリプト：

表示内容：