Расширить HTMLSelectElement

Question

Недавно я попытался расширить HTMLSelectElement вместо создания нового элемента по причинам семантики и доступности, то есть:

 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;

Он возвратил следующую ошибку: custom-select.js: 6 Uncaught DOMException: Не удалось выполнить «attachShadow» для «Element»: этот элемент не поддерживает attachShadow.

Хорошо, это было предсказуемо.

Поскольку я не могу работать с shadow-dom, мой вопрос: какое решение оттуда лучше?
Пока что могу представить:

• Работаем напрямую с innerHTML этого компонента.
• Создание этого нового элемента для работы с теневым домом.
• Перезаписывать существующую тень? (Если бы такой способ мог существовать).

Итак, какое решение вы считаете наиболее простым и «оптимизированным для SEO»?
nb: решение должно основываться на настраиваемых элементах

Answer 1

Работаем напрямую с innerHTML этого компонента.

Это «самое простое и оптимизированное для SEO» решение.

---

Создание этого нового элемента для работы с теневым домом.

Возможно, наиболее удобный, поскольку вы можете определить расширенный интерфейс.

---

Перезаписывать существующую тень?

Невозможно. Он доступен только для чтения.

---

Пример улучшения с помощью пользовательских элементов здесь, в этом другом сообщении SO .