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：「Element」で「attachShadow」を実行できませんでした：この要素はattachShadowをサポートしていません。

わかりました、それは予測可能でした。

私はshadow-domで作業できないので、私の質問はそこからの最善の解決策 は何ですか？
これまでのところ、私は想像することができます：

• このコンポーネントのinnerHTMLを直接操作します。
• シャドウDOMで機能する新しい要素を作成します。
• 既存の影を上書きしますか？（そのような方法が存在する可能性がある場合）。

では、最もシンプルで「SEOに適した」ソリューションは何だと思いますか？
nb：ソリューションはカスタム要素ベースである必要があります

Answer 1

このコンポーネントのinnerHTMLを直接操作します。

これは「最もシンプルで「SEOに優しい」ソリューション」です。

---

シャドウDOMで機能する新しい要素を作成します。

拡張UIを定義できるため、潜在的に最もユーザーフレンドリーです。

---

既存の影を上書きしますか？

ありえない。読み取り専用です。

---

この他のSO投稿のカスタム要素で拡張された例。