MDN 文档曾指出 createElement('tag', {is: 'name'}) 会自动添加 is 属性，但实际所有主流浏览器均未实现该行为；is 是元素的内部抽象属性（is value），而非 DOM 可见属性，需手动设置才能用于 CSS 或 querySelector。

mdn 文档曾指出 `createelement('tag', {is: 'name'})` 会自动添加 `is` 属性，但实际所有主流浏览器均未实现该行为；`is` 是元素的内部抽象属性（`is` value），而非 dom 可见属性，需手动设置才能用于 css 或 `queryselector`。

在 Web Components 中，定制化内置元素（customized built-in elements）——即通过 extends 选项继承原生标签（如 HTMLDivElement）并注册的元素——其核心语义由规范定义的 is value（is 值）承载，而非一个真实的 HTML 属性。这意味着：

• ✅ 浏览器内部确实为该元素关联了 is: "custom-element" 这一逻辑标识，用于激活自定义行为（如调用 connectedCallback、应用 :defined 伪类等）；
• ❌ 但该值不会自动反映为 DOM 属性（即 <div is="custom-element"> 中可见的 <code>is attribute），因此 element.hasAttribute('is') 返回 false，且 document.querySelectorAll('[is="custom-element"]') 无法匹配通过 new CustomDiv() 或 document.createElement('div', {is: 'custom-element'}) 创建的实例。

  为什么 is 属性不被自动设置？

  根据 HTML Living Standard 的描述，is 值是元素的固有状态，与 local name、namespace 等同级，属于底层 DOM 模型的一部分。规范措辞为 “used as the value of the is attribute”（“用作 is 属性的值”），而非 “sets the is attribute” —— 这暗示其设计初衷是语义绑定，而非暴露为可查询的 DOM 属性。实践中，Chromium（Blink）、Firefox（Gecko）均未实现自动设置 is 属性；Safari（WebKit）甚至完全不支持定制化内置元素（iOS 全平台受限于此）。

  解决方案：显式设置 is 属性（推荐）

  若需通过属性选择器（CSS 或 JS）定位这些元素，应在构造函数中主动调用 setAttribute('is', ...)：

  class CustomDiv extends HTMLDivElement {
    constructor() {
      super();
      // 显式设置 is 属性，确保可被 querySelector 匹配
      this.setAttribute('is', 'custom-element');
    }
  }
  
  customElements.define('custom-element', CustomDiv, { extends: 'div' });
  
  // 创建实例（两种方式均生效）
  const el1 = new CustomDiv();
  const el2 = document.createElement('div', { is: 'custom-element' });
  
  document.body.append(el1, el2);
  
  // ✅ 现在可被属性选择器捕获
  console.log(document.querySelectorAll('[is="custom-element"]').length); // → 2

  ⚠️ 注意事项：

  • setAttribute('is', ...) 必须在 super() 之后调用，否则可能触发未定义行为；
  • 此操作不影响元素的自定义行为（is value 已由浏览器内部设定），仅补充 DOM 层可见性；
  • 若元素已在 HTML 中声明（如 <div is="custom-element">），该属性天然存在，无需额外处理。<h3>替代方案：基于实例类型筛选</h3> <p>若不希望污染 DOM 属性，可改用 JavaScript 类型检测：</p> <pre class="brush:php;toolbar:false;">// 查找所有 div 并过滤出 CustomDiv 实例 const customDivs = [...document.querySelectorAll('div')] .filter(el =&gt; el instanceof CustomDiv); console.log(customDivs.length); // → 所有通过 new / createElement 创建的实例</pre> <p>此方法不依赖 <code>is 属性，兼容性更广，但无法用于纯 CSS 选择器（如 .my-style[is="custom-element"]）。

    总结

    场景	是否设置 is 属性	推荐做法
    需 CSS 样式或 querySelector 定位	✅ 必须手动 setAttribute('is', ...)	在 constructor 中设置
    仅需保证自定义行为（如生命周期钩子）	❌ 无需操作	浏览器已自动管理 is value
    需最大兼容性（含 Safari/iOS）	⚠️ 不可行	改用自治型自定义元素（<custom-element></custom-element>）或降级策略

    简言之：is 值是规范要求的内部标识，is 属性是开发者可选的 DOM 表达层——二者不可混淆，也不应默认等价。 主动设置属性是当前唯一可靠、跨浏览器的可发现性方案。