扩展 HTMLSelectElement

Question

最近，出于语义和可访问性的原因，我尝试扩展 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 Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow.

好的，这是可以预见的。

因为我不能使用 shadow-dom，我的问题是 最好的解决方案是什么？
到目前为止，我可以想象：

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

那么您认为最简单且 'SEO-friendly' 的解决方案是什么？
nb : 解决方案必须基于自定义元素

Answer 1

Working directly with the innerHTML of this component.

这是“最简单且 'SEO-friendly' 的解决方案”。

Creating that brand new element to work with shadow dom.

可能最 user-friendly 因为你可以定义一个增强的 UI。

Overwriting the existing shadow?

不可能。是read-only.

.

扩展 HTMLSelectElement

Extend HTMLSelectElement

javascript

shadow-dom

custom-element