Estender HTMLSelectElement

Question

Recentemente, tentei estender um HTMLSelectElement em vez de criar um novo elemento, por motivos semânticos e de acessibilidade, ou seja:

 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;

Ele retornou o seguinte erro: custom-select.js: 6 DOMException não capturada: Falha ao executar 'attachShadow' em 'Elemento': Este elemento não oferece suporte a attachShadow.

Ok, isso era previsível.

Já que não posso trabalhar com o shadow-dom, minha pergunta é qual é a melhor solução a partir daí?
Até agora, posso imaginar:

• Trabalhando diretamente com o HTML interno deste componente.
• Criando esse novo elemento para trabalhar com shadow dom.
• Substituindo a sombra existente? (Se tal método poderia existir).

Então, o que está em sua mente é a solução mais simples e 'amigável para SEO'?
nb: A solução deve ser baseada em elementos personalizados

Answer 1

Trabalhando diretamente com o HTML interno deste componente.

É a "solução mais simples e 'compatível com SEO'".

---

Criando esse novo elemento para trabalhar com shadow dom.

Potencialmente o mais amigável, pois você pode definir uma IU aprimorada.

---

Substituindo a sombra existente?

Não é possivel. É somente leitura.

---

Exemplo de aprimorado com elementos personalizados aqui nesta outra postagem do SO .