如何用querySelectorAll选择以-component结尾的Web Components标签？

API 探路者

2026-8-1

无法通过属性选择器获取以"-component"结尾的自定义元素

问题原因

你写的[tag$="-component"]是属性选择器，它的作用是查找拥有tag属性且属性值以-component结尾的元素，而非匹配元素的标签名本身。你的自定义元素（比如<my-component>）并没有tag属性，所以这个选择器找不到任何目标元素。

可行解决方案

CSS选择器没有直接根据标签名后缀匹配的语法，需要先获取所有元素，再筛选出标签名符合要求的：

方案1：结合`querySelectorAll('*')`与过滤

const allElements = document.querySelectorAll('*');
// 转成数组后过滤标签名
const components = Array.from(allElements).filter(el => 
  el.tagName.toLowerCase().endsWith('-component')
);

const result = document.querySelector('.result');
result.innerHTML = 'Search started<br>';
components.forEach(el => {
  result.innerHTML += `${el.tagName}<br>`;
});

方案2：用`getElementsByTagName('*')`（性能略优）

getElementsByTagName('*')返回动态HTMLCollection，比querySelectorAll('*')的静态NodeList在遍历性能上稍好：

const allElements = document.getElementsByTagName('*');
const components = [];

for (let i = 0; i < allElements.length; i++) {
  const el = allElements[i];
  // 转小写后判断后缀
  if (el.tagName.toLowerCase().endsWith('-component')) {
    components.push(el);
  }
}

const result = document.querySelector('.result');
result.innerHTML = 'Search started<br>';
components.forEach(el => {
  result.innerHTML += `${el.tagName}<br>`;
});