CSS @scope - Poort80 Demos

CSS "Donut Scoping" using @scope

Allows CSS rules to be scoped to part of the document, with upper and lower limits described by selectors.


            @scope (.card) to (.other-component) ❴
    // Styling goes here for .card (the donut) 
    // but does NOT apply to .other-component (hole of the donut)
❵

MDN documentation: CSS @scope
Can I Use.com: scope

Donut scoping — Using CSS `@scope` we only apply styles to the **dark orange part** displayed below

Inspired by:

CSS Tricks article: "Solved by CSS: Donuts Scopes"
Smashing Magazine article: "CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions"

Donut styling explained

Below we have 3 cards (the donuts) and inside them is "another component" (the hole of the donut) that we DONT'T want to be infuenced by the CSS styles of the card , and that's exactly what CSS @scope allows us to do .
The HTML headings in each .card, also in .other-component, is a HTML H2 element. And should NOT be affected by the scoped CSS .

Example donuts

Scoping CSS also helps by not having to put HTML classes on every element! Just style the HTML element itself inside the @scope. Inspect the .card's HTML H2-element below.

H2. Disco donuts

Amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati! Amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!

H2. Other component

Styling not influenced by the card's CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!

H2. Chocolate donuts

Amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!

H2. Other component

Styling not influenced by the card's CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati! Amet consectetur adipisicing elit.

Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!

H2. Sugar donuts

Amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!

H2. Other component

Styling not influenced by the card's CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum eius facere ut ad libero amet ex consequatur nostrum obcaecati!