继承HTMLButtonElement的自定义元素附加Shadow DOM报错排查

继承HTMLButtonElement实现的自定义内置元素无法附加Shadow DOM，该行为是Web标准明确规定的，和代码写法无关。

浏览器仅允许部分元素作为Shadow DOM的宿主，以下类型元素调用attachShadow()方法时都会抛出DOMException: operation is not supported错误：

• 带有原生内部渲染、交互逻辑的内置元素：包括button、input、select、textarea、img、br、hr等
• 已经挂载过Shadow Root的元素
• 非HTML文档命名空间下的元素

其中button这类表单交互元素被禁止挂载Shadow DOM，核心原因是这类元素的原生行为（表单关联、点击触发、可访问性树映射、默认样式逻辑）由浏览器底层控制，如果允许Shadow DOM覆盖其内部结构，会直接破坏原生交互一致性，引发表单提交失效、读屏软件识别异常等不可预期问题。
测试时继承HTMLElement、HTMLSpanElement可以正常挂载Shadow DOM，是因为这两类属于无特殊原生逻辑的普通容器元素，在规范允许挂载Shadow DOM的元素范围内。

如果需要实现样式、结构封装的自定义按钮，不要使用继承内置button的自定义内置元素方案，改用继承HTMLElement的自主自定义元素方案即可，自行补充按钮需要的可访问性属性、交互逻辑，参考实现代码如下：

class HomeButton extends HTMLElement {
  constructor() {
    super();
    this._dom = this.attachShadow({ mode: "open" });
    // 补充按钮语义与键盘聚焦能力
    this.setAttribute("role", "button");
    this.tabIndex = 0;
    this.createContent();
  }

  createContent() {
    const style = document.createElement("style");
    style.textContent = `
      :host {
        display: inline-block;
        margin: 1%;
        padding: 1%;
        border-radius: 5px;
        border: 1px solid black;
        cursor: pointer;
      }
      .homeLink{
        text-decoration: none;
        color: green;
      }
    `;
    const anchor = document.createElement("a");
    anchor.innerText = "<< Home";
    anchor.setAttribute("href", "/");
    anchor.setAttribute("class", "homeLink");
    this._dom.append(style, anchor);
  }
}

// 自主自定义元素不需要配置extends参数
customElements.define("simple-btn", HomeButton);
const sentToHomeBtn = document.createElement("simple-btn");
document.body.appendChild(sentToHomeBtn);

注：原实现中在继承HTMLButtonElement的自定义元素内部再次嵌套<button>标签属于冗余写法，本身不符合语义要求。

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