CSS语法$=适用于元素 * 属性 *，而不是元素本身。
没有语法可以创建一个CSS选择器来匹配具有特定后缀的元素。
但是，如果目的是查找尚未注册的定制元素，则可以使用:defined选择器：

const components = document.querySelectorAll(':not(:defined)');
const result = document.querySelector('.result');

result.innerHTML = 'Search started<br>';

for(var i = 0; i < components.length; i++){
  result.innerHTML = result.innerHTML + components[i].tagName + '<br>';
}

<my-component>
  <hello-world-component>
    <h1>Hello, world!</h1>
  </hello-world-component>
</my-component>
<div class="result"></div>

这些元素中没有定义"tag"属性，但是你可以通过javascript添加它。

document.querySelectorAll(":where(my-component, my-component *)")
  .forEach(c => c.setAttribute("tag", c.tagName.toLowerCase()));

const components = document.querySelectorAll('[tag$="-component"]');
const result = document.querySelector('.result');

result.innerHTML = 'Search started<br>';

for(var i = 0; i < components.length; i++){
 
  result.innerHTML = result.innerHTML + components[i].tagName + '<br>';
 
}

<my-component>

  <hello-world-component>
  
    <h1>Hello, world!</h1>
  
  </hello-world-component>

</my-component>

<div class="result"></div>

不需要 * 全局 * 脚本或:defined

• 使组件设置自己的tag属性
• 将正确应用所有CSS
• 所有querySelectorAll都将工作

customElements.define("my-component", class extends HTMLElement{
  connectedCallback(){
    this.setAttribute("tag", this.localName);
  }
});

document.body.append( 
                     document.querySelectorAll('[tag$="-component"]').length , 
                     " Components!" 
                    );

/* get all Nodes with the tag attribute *ending* on -component */
[tag$="-component"] {
  background: lightgreen;
}

<my-component>Component 1</my-component>
<my-component>Component 2</my-component>
<my-component>Component 3</my-component>
<my-component>Component 4</my-component>