CSS Scope & Encapsulation

Archived:

đźšš This content is being maintained elsewhere. Our notes are likely out-of-date.

See the latest specification for details.

Authors often complain that CSS is “globally scoped” – so that every selector is compared against every DOM element.

There are several overlapping concerns here, based on a wide range of use-cases – and they can quickly become confused. That has lead to a wide array of proposals that are sometimes working towards different goals.

Both shadow-DOM and the abandoned “scope” specification were focused around strong isolation. Shadow-DOM in particular creates persistent DOM-defined boundaries, that impact all style rules.

Meanwhile, most of the user-land “scope” tools for CSS have a much lighter touch. I’ve been mainly interested in those low-isolation, namespacing problems.

Important Links

Related Notes