CSSScopeRule
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The CSSScopeRule
interface of the CSS Object Model represents a CSS @scope
at-rule.
Instance properties
Inherits properties from its ancestors CSSGroupingRule
and CSSRule
.
Instance methods
Inherits methods from its ancestors CSSGroupingRule
and CSSRule
.
Examples
Accessing @scope information in JavaScript
Assuming the following is the only stylesheet attached to a document:
css
@scope (.outer) to (.inner) {
:scope {
background: yellow;
}
}
The following JavaScript could be used to access information about the contained @scope
block:
js
const scopeBlock = document.styleSheets[0].cssRules[0];
console.log(scopeBlock.start); // Returns ".outer"
console.log(scopeBlock.end); // Returns ".inner"
Specifications
Specification |
---|
CSS Cascading and Inheritance Level 6 # cssscoperule |
Browser compatibility
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- User must explicitly enable this feature.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.