Med @scope kan man definere CSS regler som skal gjelde for et subsett av DOM-treet uten at man må skrive veldig spesifikke selektorer. Jeg har også sett folk kalle dette for Donut Scope siden man kan definere stiler som treffer en smultringliknende del av DOM-en, hvor alt over og resten inni står uforandret.

@scope (donut) to (donuthole) {
  div {
	  /* flavours */
  }
}

Så hvorfor vil man gjøre dette? Det kan være at man vil overskrive stiler uten å knytte stilene altfor mye mot DOM-strukturen. I dette eksempelet har vi en seksjon med flere artikler inni seg. La oss si at vi har en tekstfarge på hele siden, men vi ønsker en annen tekstfarge på section

<section>
	<p>Lorem ipsum</p>
	<article>
		<p>dolor sit amet</p>
	</article>
	<article>
		<p>dolor sit amet</p>
	</article>
</section>

Vi kunne selvfølgelig brukt section p eller section > p , men da vil vi enten treffe alle <p> med førstnevnte eller knytte oss veldig opp mot strukturen i sistnevnte, som betyr at vi må passe på å oppdatere stilene skulle vi endre på HTML-strukturen.

@scope kan vi fint løse dette problemet ved å kun stile alt mellom section og article

@scope (section) to (article) {
  * {
    color: goldenrod;
  }
}

Man kan også referere til root-elementet med :scope pseudo-klassen. Denne vil peke på section i dette eksempelet.

Denne regelen er støttet av de fleste med unntak av Firefox denne gangen, så dessverre ikke noe man kan ta i bruk helt enda, men nå vet du om den når den tid kommer!