CSS: Inline @scope in HTML style tag

Inline scope (in html style tag)

the @scope at-rule allows you to place HTML style tag anywhere in HTML, not just inside head.

place @scope inside style tag, and now the style can be placed anywhere in HTML.

the scope of scoped style is the parent element of the style. (and its descendants.)

Note: before scope at-rule, it is technically invalid html if you place style tag outside of header. however, browsers accept it, but, it applies the css globally, as if the style is in header, and may cause annoying browser repaint.

Example

<div>
 <p>this is red</p>

 <style>
 @scope {
  p {
   color: red;
  }
 }
 </style>

 <p>red too</p>
</div>

<div>
 <p>this is NOT red, because it's outside the scope.</p>
</div>

🛑 WARNING: you do not need a scope-root selector. but you can add a scope-limit selector. See CSS: @scope at-rule

• css scope test 2026-08-12

Example. inline scope with scope-limit.

<div>
 <p>this is red</p>

 <style>
 @scope to (.x35c76) {
  p {
   color: red;
  }
 }
 </style>

 <p>red too</p>

 <div class="x35c76">
  <p>this is not red, because it's been filtered out by scope-limit.</p>
 </div>
</div>