扩展HTMLSelectElement

问题描述

最近，出于语义和可访问性的原因，我尝试扩展HTMLSelectElement而不是创建全新的元素，即：

 let customSelect = function () {
  customElements.define(
    "custom-select",class CustomSelect extends HTMLSelectElement {
      connectedCallback() {
        this.attachShadow({ mode: "open" });
        this.shadowRoot.innerHTML = `
      test
      `;
      }
    },{ extends: "select" }
  );
};

export default customSelect;

它返回以下错误：custom-select.js：6未捕获的DOMException：无法在“元素”上执行“ attachShadow”：此元素不支持attachShadow。

好，这是可以预见的。

由于我无法使用shadow-dom，因此我的问题是在那里最好的解决方案是什么？
到目前为止，我可以想象：

• 直接使用此组件的innerHTML。
• 创建与影子dom一起使用的全新元素。
• 是否覆盖现有阴影？ （如果可能存在这种方法）。

那么，您认为最简单，最“ SEO友好”的解决方案是什么？
nb：解决方案必须基于自定义元素

解决方法

直接使用此组件的innerHTML。

这是“最简单且对SEO友好的解决方案”。

---

创建与影子dom一起使用的全新元素。

可能是最人性化的，因为您可以定义增强型UI。

---

要覆盖现有阴影吗？

不可能。它是只读的。

---

Example of <select> enhanced with Custom Elements here in this other SO post。