在 Web Components 中，可通过 is 属性声明内置自定义元素（如 ），并使用标准属性选择器 div[is="custom-element"] 精准定位，无需特殊语法。
在 web components 中，通过 `is` 属性声明内置自定义元素（如 `
`）并使用标准属性选择器 `div[is="custom-element"]` 精准定位，无需特殊语法。
当使用 customElements.define() 注册内置自定义元素（built-in element extension）时，必须指定 extends 选项（如 { extends: 'div' }），此时该自定义类仅能通过带有 is 属性的原生标签实例化——例如 <div is="custom-element"></div>。这类元素不是新标签名，而是对原生元素的增强，因此无法用 document.querySelector('custom-element') 选取，而应采用标准 HTML 属性选择器语法。
✅ 正确写法（推荐）：
// ✅ 匹配所有 is="custom-element" 的 div 元素
const customDivs = document.querySelectorAll('div[is="custom-element"]');
// ✅ 在 CSS 中同样适用
// div[is="custom-element"] {
// border: 2px solid blue;
// }
❌ 常见错误写法：
// ❌ 错误：querySelector 不支持伪类式写法 `is:`（这不是 CSS 伪类）
document.querySelector('div[is:"custom-element"]'); // 引号类型错误（应为单/双引号）
// ❌ 错误：`is:` 不是合法 CSS 选择器语法，也非 JS 方法
document.querySelector('div:is(custom-element)'); // 这是 :is() 函数，用于匹配多种选择器，与自定义元素无关
// ❌ 错误：标签名不存在（未注册为 autonomous custom element）
document.querySelector('custom-element'); // 仅适用于 autonomous 元素（如 <custom-element></custom-element>）
⚠️ 注意事项：
-
is属性值严格区分大小写，必须与customElements.define()中注册的名称完全一致； - 浏览器兼容性良好（Chrome 67+、Firefox 63+、Safari 16.4+ 支持内置扩展，但 Safari 对
is属性支持较晚，生产环境建议降级检测）； - 若需更健壮的选择方式，可结合
instanceof判断：const el = document.querySelector('div[is="custom-element"]'); if (el instanceof CustomDiv) { console.log('Matched custom built-in element'); }
总结：is 是标准 HTML 属性，不是 CSS 伪类或专用选择器关键字。只需像操作普通属性一样使用 [is="..."] 即可——简洁、标准、可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
