Thanks to visit codestin.com
Credit goes to developer.mozilla.org

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSSScopeRule

Limited availability

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

CSSScopeRuleCSS オブジェクトモデルのインターフェイスで、 @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

ブラウザーの互換性

関連情報