CSSScopeRule

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

CSSScopeRule は CSS オブジェクトモデルのインターフェイスで、 @scope アットルールを表します。

CSSRule CSSGroupingRule CSSScopeRule

インスタンスプロパティ

このインターフェイスには親である CSSGroupingRule から継承したプロパティがあります。

end

@scope アットルールのスコープリミットの値を格納した文字列を返します。

start

@scope アットルールのスコープルートの値を格納した文字列を返します。

インスタンスメソッド

このインターフェイスには親である CSSGroupingRule から継承したメソッドがあります。

例

JavaScript で @scope 情報にアクセス

以下のものが文書に添付されている唯一のスタイルシートであるとします。

css
@scope (.outer) to (.inner) {
  :scope {
    background: yellow;
  }
}

以下の JavaScript を使用することで、内包された @scope ブロックの情報にアクセスすることができます。

js
const scopeBlock = document.styleSheets[0].cssRules[0];

console.log(scopeBlock.start); // ".outer" を返す
console.log(scopeBlock.end); // ".inner" を返す

仕様書

Specification
CSS Cascading and Inheritance Level 6
# cssscoperule

ブラウザーの互換性

BCD tables only load in the browser

関連情報