Erweitern Sie HTMLSelectElement

Question

Kürzlich habe ich aus semantischen Gründen und aus Gründen der Barrierefreiheit versucht, ein HTMLSelectElement zu erweitern, anstatt ein brandneues Element zu erstellen, z.

 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;

Es wurde der folgende Fehler zurückgegeben: custom-select.js: 6 Nicht erfasste DOMException: Fehler beim Ausführen von 'attachShadow' für 'Element': Dieses Element unterstützt attachShadow nicht.

Ok, das war vorhersehbar.

Da ich nicht mit Shadow-Dom arbeiten kann, ist meine Frage, was von dort aus die beste Lösung ist.
Bisher kann ich mir vorstellen:

• Direkt mit dem innerHTML dieser Komponente arbeiten.
• Erstellen dieses brandneuen Elements für die Arbeit mit Shadow Dom.
• Den vorhandenen Schatten überschreiben? (Wenn eine solche Methode möglicherweise existieren könnte).

Was ist für Sie die einfachste und "SEO-freundlichste" Lösung?
nb: Die Lösung muss auf benutzerdefinierten Elementen basieren

Answer 1

Direkt mit dem innerHTML dieser Komponente arbeiten.

Es ist die "einfachste und" SEO-freundlichste "Lösung".

---

Erstellen dieses brandneuen Elements für die Arbeit mit Shadow Dom.

Möglicherweise am benutzerfreundlichsten, da Sie eine erweiterte Benutzeroberfläche definieren können.

---

Den vorhandenen Schatten überschreiben?

Nicht möglich. Es ist schreibgeschützt.

---

Beispiel für eine Erweiterung mit benutzerdefinierten Elementen hier in diesem anderen SO-Beitrag .