Estendi HTMLSelectElement

Question

Recentemente, ho provato ad estendere un HTMLSelectElement invece di creare un elemento nuovo di zecca, per motivi semantici e di accessibilità, ovvero:

 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;

Ha restituito il seguente errore: custom-select.js: 6 DOMException non rilevata: impossibile eseguire "attachShadow" su "Element": questo elemento non supporta attachShadow.

Ok, era prevedibile.

Dato che non posso lavorare con shadow-dom, la mia domanda è qual è la soluzione migliore da lì?
Finora, posso immaginare:

• Lavorare direttamente con il innerHTML di questo componente.
• Creare quel nuovissimo elemento per lavorare con shadow dom.
• Stai sovrascrivendo l'ombra esistente? (Se tale metodo potrebbe esistere).

Allora, qual è nella tua mente la soluzione più semplice e "SEO-friendly"?
NB: la soluzione deve essere basata su elementi personalizzati

Answer 1

Lavorare direttamente con il innerHTML di questo componente.

È la "soluzione più semplice e" SEO-friendly "".

---

Creare quel nuovissimo elemento per lavorare con shadow dom.

Potenzialmente il più user-friendly in quanto puoi definire un'interfaccia utente migliorata.

---

Stai sovrascrivendo l'ombra esistente?

Non possibile. È di sola lettura.

---

Esempio di miglioramento con elementi personalizzati qui in questo altro post SO .