Perpanjang HTMLSelectElement

Question

Baru-baru ini, saya mencoba memperluas HTMLSelectElement alih-alih membuat elemen baru, untuk alasan semantik dan aksesibilitas, yaitu:

 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;

Ini mengembalikan kesalahan berikut: custom-select.js: 6 DOMException Tidak Tertangkap: Gagal menjalankan 'attachShadow' pada 'Element': Elemen ini tidak mendukung attachShadow.

Oke, itu sudah bisa ditebak.

Karena saya tidak dapat bekerja dengan shadow-dom, pertanyaan saya adalah apa solusi terbaik dari sana?
Sejauh ini, saya bisa membayangkan:

• Bekerja secara langsung dengan innerHTML dari komponen ini.
• Membuat elemen baru untuk bekerja dengan shadow dom.
• Menimpa bayangan yang ada? (Jika metode seperti itu mungkin ada).

Jadi, apa yang Anda pikirkan tentang solusi paling sederhana dan 'ramah SEO'?
nb: Solusinya harus berbasis elemen khusus

Answer 1

Bekerja secara langsung dengan innerHTML dari komponen ini.

Ini adalah "solusi paling sederhana dan 'ramah SEO'".

---

Membuat elemen baru untuk bekerja dengan shadow dom.

Berpotensi paling ramah pengguna karena Anda dapat menentukan UI yang ditingkatkan.

---

Menimpa bayangan yang ada?

Tidak memungkinkan. Ini hanya-baca.

---

Contoh ditingkatkan dengan Elemen Kustom di sini di posting SO lainnya .