is属性已被主流浏览器废弃，Chrome 80+、Firefox 63+、Safari 16.4+ 均移除支持，<button is="my-button">会被忽略；替代方案是使用独立标签名如<my-button>并配合customElements.define()注册，推荐直接继承HTMLElement以确保兼容性与可控性。
is 属性在现代浏览器中基本不可用
Chrome 80+、Firefox 63+ 和 Safari 16.4+ 已移除对 is 属性的支持，且所有主流浏览器均不再允许通过 is 创建或扩展原生元素。你写 <button is="my-button">，浏览器会直接忽略 is，只当普通 <button> 渲染，自定义行为完全不会触发。
为什么 is 属性被废弃
Web Components 规范早期曾将 is 作为“自定义内置元素”（Customized Built-in Elements）的入口，但实际落地问题太多：
-
is要求必须先用customElements.define("my-button", MyButton, { extends: "button" })注册，否则无效； - 所有继承原生元素的类必须显式调用
super()并处理attributeChangedCallback等生命周期，复杂度远超预期； - Safari 始终未实现该特性，Firefox 后期弃用，Chrome 在 v80 彻底删除 DOM 层支持；
- 即使曾经可用，
is也无法与 Shadow DOM、:host伪类或form-associated custom elements正常协同。
替代方案：用标准 customElements.define + 自定义标签名
唯一可靠、跨浏览器的扩展方式是放弃 is，改用独立标签名：
<my-button label="提交"></my-button>
对应注册：
立即学习“前端免费学习笔记（深入）”；
class MyButton extends HTMLButtonElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button><slot></slot></button>`;
}
}
customElements.define('my-button', MyButton, { extends: 'button' });
注意：{ extends: 'button' } 仍需保留，否则无法继承原生按钮语义和表单行为；但使用时必须用 <my-button> 标签，不能靠 is “注入”到 <button> 中。
真实项目里更推荐不继承原生元素
除非你明确需要表单提交、form 关联、disabled 自动传播等原生能力，否则直接继承 HTMLElement 更稳妥：
- 兼容性 100%，无
is或extends限制； - 可自由控制 shadow root、事件冒泡、焦点管理；
- 避免因浏览器差异导致
click不触发、tabindex失效等隐性问题； - 用 ARIA 属性（如
role="button"、aria-pressed）补足可访问性，效果更可控。
真正难的不是语法怎么写，而是判断「是否真有必要复用原生语义」——多数 UI 组件其实不需要。
