A deep dive into the CSS @scope rule and how to select the scoping root using :scope and & (nesting selector). Covers the behavior of :scope in stylesheets vs. inside @scope rules, how selectors inside a scope rule are constrained to in-scope elements, and the two key differences between :scope and & when multiple scoping roots are defined: specificity (& inherits the specificity of the most specific selector in the list, while :scope always has pseudo-class specificity) and matching behavior (:scope only matches the scoping root itself, while & can match any element in the selector list). Includes code examples for each scenario. Note: @scope requires Chrome Canary with experimental flags enabled at time of writing.
2 Impressions