Trying @scope standard in Nextjs component:

function Foo() {
  return (
    <div>
      <style>
      @scope {
        /* prelude omitted => automatically scoped to the <style> element's enclosing parent element. */
        p {color:red;}
      }
      </style>

      <p>
        Fore sure, scoped CSS is the <del>past</del><ins>future(maybe)</ins>!
      </p>
    </div>
  )
}

Is it possible to use plain old <style> tag (without css-in-js or anything)?

- https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
- https://discord.com/channels/896960631322849340/896960787099299850/1268536803938537492