关于CSS伪类:scope使用场景及相关概念的确认问询

:scope CSS伪类代表作为选择器匹配参考点（即作用域）的元素。

我的初步理解是否正确？ #

我对:scope相关的“自定义”伪类的理解如下：

• 可通过DOM API在JavaScript中创建并使用
• 无法在样式规则中使用

我尝试用伪类为iamscoped元素的子链接设置样式：

ul:first-child { font-size: 25px; color: red} /** <-- 此代码生效 */
a:iamscoped { font-size: 35px; color: red} /** <-- 此代码不生效 */

我认为这无法实现，因为作用域是通过JavaScript创建的，样式渲染时还不存在。

代码示例 #

JavaScript

function colorScope() {
  const parentNode = document.getElementById("iamscoped");  
  // 此处通过DOM API创建作用域
  const spans = parentNode.querySelectorAll(":scope span");
  spans.forEach((el) => {
    el.style.color = "red";
    el.style.fontSize = "2em"
  });
}

CSS

a {color: black}
ul li:first-child { font-size: 20px; color: blue}
/** 此时作用域尚未存在 */
span:iamscoped { font-size: 35px; color: red}
span[xxuuas] {color: green; font-weight: bold; font-size:30px}

HTML

<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>

我的以下理解是否正确？ #

• :scope伪类只能通过DOM API使用
• 无法在样式表中使用
• 对于<span xxuuas>和span[xxuuas] {...}，这是另一种机制，是否可称为作用域标识符？

内容的提问来源于stack exchange，提问作者surfmuggle