Extender HTMLSelectElement

Question

Recientemente, intenté extender un HTMLSelectElement en lugar de crear un elemento nuevo, por razones semánticas y de accesibilidad, es decir:

 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;

Devolvió el siguiente error: custom-select.js: 6 DOMException no detectada: no se pudo ejecutar 'attachShadow' en 'Element': este elemento no es compatible con attachShadow.

Ok, eso era predecible.

Como no puedo trabajar con shadow-dom, mi pregunta es ¿cuál es la mejor solución a partir de ahí?
Hasta ahora, puedo imaginar:

• Trabajando directamente con el innerHTML de este componente.
• Creando ese nuevo elemento para trabajar con shadow dom.
• ¿Reemplazando la sombra existente? (Si tal método pudiera existir).

Entonces, ¿qué tienes en mente es la solución más simple y 'amigable con SEO'?
nb: la solución debe estar basada en elementos personalizados

Answer 1

Trabajando directamente con el innerHTML de este componente.

Es la solución "más sencilla y 'compatible con SEO'".

---

Creando ese nuevo elemento para trabajar con shadow dom.

Potencialmente el más fácil de usar, ya que puede definir una interfaz de usuario mejorada.

---

¿Reemplazando la sombra existente?

Imposible. Es de solo lectura.

---

Ejemplo de mejora con elementos personalizados aquí en esta otra publicación de SO .