くまだどうも、くまだです。
CSSの@scopeについてのあれこれ。
@scopeについて
CSSの@scopeは、特定のHTMLやコンポーネントに対して、限定的にCSSを当てることができます。例えば以下のような指定です。
<div class="boxWrap">
<div class="box"></div>
</div>
<div class="boxWrap2">
<div class="box"></div>
</div>
.box {
inline-size: 100px;
block-size: 100px;
border: 1px solid black;
}
.box {
background-color: blue;
}
@scope (.boxWrap) { /* @scope */
.box {
background-color: red;
}
}
@scopeに指定・マッチした.boxwrap要素の子要素のboxの背景色を赤に変更できました。
さらに、以下のような指定もできます。
<section>
<h2>h2見出し</h2>
<p>pタグ</p>
<h3>h3見出し</h3>
<p>pタグ</p>
<span>スパンタグ</span>
<div class="box2 box2--test">
<div class="box"></div>
</div>
<div class="box2 ">
<div class="box"></div>
</div>
</section>.box {
inline-size: 100px;
block-size: 100px;
border: 1px solid black;
}
.box2 {
inline-size: 150px;
block-size: 150px;
border: 1px solid black;
display: block flex;
justify-content: center;
align-items: center;
}
.box {
background-color: blue;
}
.box2{
background-color: orange;
}
/* @scope to */
@scope (section) to (.box2--test) {
:where(h2, h3, span, p) {
color: red;
}
.box {
background-color: red;
}
}
sectionの中の.box2–testを除いて、スタイルが変更されました。
「to」はscopeの終端を意味していて、上の例だと.box2–testが終端でその子要素の.boxにはスタイルは適用されません。
/* @scope to */
@scope (section) to (.box2--test) { /*section開始で.box2--testがスコープ終端*/
:where(h2, h3, span, p) {
color: red;
}
.box { /* .box2--testの中の.boxはスコープ適用範囲外なので、このスタイルは当たらない */
background-color: red;
}
}
.box2はスコープの範囲内なので、.box2の中の.boxにも上のスタイルは適用されます。
ほとんどの最新ブラウザ対応済です。
ここまで読んでくださりありがとうございました。