DOM元素节点的‘is值’是什么？该概念的实际用途是什么？

嘿，这个is属性其实是自定义元素体系里专门用来「增强」原生HTML元素的利器，我来给你掰扯清楚它到底干嘛用的～

核心用途：给原生元素「加buff」 #

自定义元素分两种：一种是完全独立的自定义标签（比如<my-custom-card>），另一种就是基于原生元素扩展的自定义内置元素——is就是用来把原生元素和你的自定义逻辑绑定的桥梁。

举个实际的例子：你想做一个点击会变色的按钮，但又不想放弃原生<button>自带的所有特性（比如回车/空格触发点击、焦点管理、无障碍支持这些现成的能力），这时候is就派上用场了：

// 先定义一个继承自原生按钮的自定义类
class ColorfulButton extends HTMLButtonElement {
  constructor() {
    super(); // 必须先调用父类构造函数
    this.addEventListener('click', () => {
      // 点击时随机切换背景色
      this.style.backgroundColor = `hsl(${Math.random() * 360}, 80%, 70%)`;
    });
  }
}

// 注册自定义元素时，指定要扩展的原生元素类型
customElements.define('colorful-button', ColorfulButton, { extends: 'button' });

然后在HTML里这么写：

<button is="colorful-button">点我变色</button>

这时候这个按钮还是原生的<button>，但同时拥有了你定义的ColorfulButton的所有功能——完美保留原生特性的同时，加上了自定义逻辑，比从零造一个按钮省心太多。

DOM中is值的意义 #

你在规范里看到的元素关联is值，就是这个属性的字符串内容（比如上面的"colorful-button"），如果元素没用到这个特性就是null。它的作用是告诉浏览器：「这个原生元素要关联到对应的自定义内置元素定义上」，浏览器会根据这个值把自定义类的逻辑挂载到原生元素上。

为什么不直接用独立自定义元素？ #

比如你要是做个<colorful-button>，它本质是个普通的HTMLElement，没有原生按钮的默认样式、键盘交互、无障碍属性这些，你得自己全部实现，成本极高。而用is绑定的话，这些原生特性都原封不动保留，只需要加你要的额外功能就行。

一些小提醒 #

• 不是所有原生元素都能被扩展，规范里有明确的允许列表（比如<a>、<input>、<ul>这些常见元素都支持，<html>、<body>这类根元素不行）。
• 现代浏览器基本都支持这个特性，要是需要兼容旧版浏览器，可能得用polyfill补一下。

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