Rozszerz HTMLSelectElement

Question

Ostatnio próbowałem rozszerzyć HTMLSelectElement zamiast tworzyć zupełnie nowy element, ze względów semantycznych i dostępności, tj .:

 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;

Zwrócił następujący błąd: custom-select.js: 6 Uncaught DOMException: Nie udało się wykonać „attachShadow” na „Element”: Ten element nie obsługuje attachShadow.

Ok, to było do przewidzenia.

Ponieważ nie mogę pracować z shadow-domem, moje pytanie brzmi: jakie jest najlepsze rozwiązanie z tego miejsca?
Na razie mogę sobie wyobrazić:

• Praca bezpośrednio z wewnętrznym kodem HTML tego składnika.
• Stworzenie zupełnie nowego elementu do pracy z shadow dom.
• Nadpisujesz istniejący cień? (Gdyby taka metoda mogła istnieć).

Jakie jest zatem najprostsze i „przyjazne dla SEO” rozwiązanie?
Uwaga: rozwiązanie musi być oparte na elementach niestandardowych

Answer 1

Praca bezpośrednio z wewnętrznym kodem HTML tego składnika.

To „najprostsze i najbardziej przyjazne dla SEO rozwiązanie”.

---

Stworzenie zupełnie nowego elementu do pracy z shadow dom.

Potencjalnie najbardziej przyjazny dla użytkownika, ponieważ możesz zdefiniować ulepszony interfejs użytkownika.

---

Nadpisujesz istniejący cień?

Niemożliwe. Jest tylko do odczytu.

---

Przykład ulepszenia o elementy niestandardowe tutaj w tym innym poście dotyczącym SO .