Style rule X not allowed outside an “@scope” rule in a “style” element in “body”.

A <style> element in the <body> contains a CSS style rule that isn't inside an @scope block.

Since October 2026, the HTML standard allows <style> in the <body> as long as its styles can't reach anything earlier in the page. That means every style rule has to sit inside an @scope block with nothing between @scope and the opening brace. Without a selector, @scope applies to the parent element of the <style> and everything inside it, so p only matches the paragraphs in that parent. A top-level rule like .card p could restyle any paragraph on the page, including ones the browser has already drawn.

Style rules nested in @media, @supports or @container count too. Put those at-rules inside the @scope block, or put an @scope block inside them. At-rules that don't select elements, like @font-face and @keyframes, can stay at the top level. Two other limits apply to a <style> in the <body>: it can't contain @import, and it must be the first child of its parent.

To fix the error, wrap the rules in @scope { } and drop the part of each selector that pointed at the parent. Inside the block, :scope matches the parent element itself. Writing a selector after the keyword, as in @scope (.card), triggers a different error unless that rule is nested in another @scope. If the styles need to apply to the whole page, move the <style> element into the <head>.

Invalid example

<div class="card">
  <style>
    .card p {
      color: darkslategray;
    }
  </style>
  <p>Card content</p>
</div>

Valid example

<div class="card">
  <style>
    @scope {
      :scope {
        padding: 1rem;
      }

      p {
        color: darkslategray;
      }
    }
  </style>
  <p>Card content</p>
</div>

Learn more:

MDN Reference

MDN Web Docs: @scope

→

MDN Reference

MDN Web Docs: <style> element

→

WHATWG Spec

HTML Standard: Document metadata (the style element)

→