Étendre HTMLSelectElement

Question

Récemment, j'ai essayé d'étendre un HTMLSelectElement au lieu de créer un tout nouvel élément, pour des raisons sémantiques et d'accessibilité, à savoir:

 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;

Il a renvoyé l'erreur suivante: custom-select.js: 6 Uncaught DOMException: Impossible d'exécuter 'attachShadow' sur 'Element': cet élément ne prend pas en charge attachShadow.

Ok, c'était prévisible.

Comme je ne peux pas travailler avec shadow-dom, ma question est quelle est la meilleure solution à partir de là?
Jusqu'à présent, je peux imaginer:

• Travailler directement avec le innerHTML de ce composant.
• Créer ce nouvel élément pour travailler avec shadow dom.
• Écraser l'ombre existante? (Si une telle méthode pouvait exister).

Alors, que pensez-vous de la solution la plus simple et la plus «SEO-friendly»?
nb: la solution doit être basée sur des éléments personnalisés

Answer 1

Travailler directement avec le innerHTML de ce composant.

C'est la «solution la plus simple et la plus« SEO-friendly »».

---

Créer ce nouvel élément pour travailler avec shadow dom.

Potentiellement le plus convivial car vous pouvez définir une interface utilisateur améliorée.

---

Écraser l'ombre existante?

Pas possible. Il est en lecture seule.

---

Exemple d' amélioration avec des éléments personnalisés ici dans cet autre article SO .