Use of CSS pseudo class `:scope` to style elements

Question

From mdn pseudo classes :scope

The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.

To my understanding a "custom" pseudo class for :scope can

1. be created and used from javascript using the DOM Api
2. can not be used in style rules

Is my understanding correct?

In the code exmple below i want to style links that are children of iamscoped with the use of a pseudo class

ul:first-child { font-size: 25px; color: red} /** <-- this works */
a:iamscoped { font-size: 35px; color: red} /** <-- this does not */

But to my understanding this is not possible and not intended since the scope will be created from javascript but does not exist yet for the style rendering.

function colorScope() {
  const parentNode = document.getElementById("iamscoped");  
  // scope is now created using DOM Api
  const spans = parentNode.querySelectorAll(":scope span");
  spans.forEach((el) => {
    el.style.color = "red";
    el.style.fontSize = "2em"
  });
}

a {color: black}
ul li:first-child { font-size: 20px; color: blue}
/** scope does not exist yet */
span:iamscoped { font-size: 35px; color: red}
span[xxuuas] {color: green; font-weight: bold; font-size:30px}

<div id="iamscoped">
  <ul><li><span>scoped 1st list-item-child</span></li>
    <li><span>scoped</span></li>
  </ul>
  <span xxuuas>I am super-special</span>
</div>
<div id="unsocped">
  <ul>
    <li><span>unscoped 1st list-item</span></li>
    <li><span>unscoped span</span></li>
  </ul>
  <span xxuuas>I am super-special</span>
</div>
<button onclick="colorScope()">color scoped</button>

Is my understanding correct?

• The scope pseudo class can only be used via DOM API
• Can not be used inside a stylesheet
• Regarding <span xxuuas> and span[xxuuas] {...} this is somthing else - maybe named a scope identifier?