Prior Art

Table of Contents

Existing Specifications

CSS Selectors - Level 4

In CSS, this is the same as :root, since there is no way to scope elements. However, it is used by JS APIs to refer to the base element of e.g. element.querySelector()

“Specifications intending for this pseudo-class to match specific elements rather than the document’s root element must define either a scoping root (if using scoped selectors) or an explicit set of :scope elements.”

CSS Scoping - Level 1

The latest draft is primarily concerned with Custom Elements & Shadow DOM.

The First Public Working Draft had more scoping features that have since been removed:

A <style scoped> attribute, which would apply to sibling elements and their descendants. This had a few limitations:

It also included CSS @scope blocks, which would help alleviate both issues. Scoping has two primary effects:

CSS Cascade - Level 4

Ecosystem

Naming conventions (BEM)

To show that .element is not just inside .block, but belongs to itBEM requires authors to manually namespace one class using both names:

/* .element scoped to .block */
.block-element { /* ... */ }

JS tools & frameworks

CSS Modules, Vue, Styled-JSX, and other tools often use a similar pattern (with slight changes to syntax):

/* a component & it's children get a unique attribute to select against */
.component[scope=component] { /* ... */ }
.element[scope=component] { /* ... */ }

/* nested component containers are part of both outer & inner scope */
.sub-component[scope=component],
.sub-component[scope=sub-component]
{ /* ... */ }

/* but elements inside a nested component only have inner scope */
.sub-element[scope=sub-component] { /* ... */ }

CSSWG draft issues

Yu Han’s notes & proposal

This proposal has two parts, designed to build on top of existing shadow DOM logic.

  1. Allow shadow-DOM elements to opt-in to global styles
  2. Allow light-DOM elements to opt-in to style isolation