HTMLSelectElement'i genişlet

Question

Son zamanlarda, anlamsal ve erişilebilirlik nedenleriyle yepyeni bir öğe oluşturmak yerine bir HTMLSelectElement öğesini genişletmeye çalıştım, örn:

 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;

Aşağıdaki hatayı döndürdü: custom-select.js: 6 Yakalanmamış DOMException: 'Element' üzerinde 'attachShadow' yürütülemedi: Bu öğe attachShadow'u desteklemiyor.

Tamam, bu tahmin edilebilirdi.

Shadow-dom ile çalışamadığım için sorum şu , oradan en iyi çözüm nedir?
Şimdiye kadar hayal edebiliyorum:

• Doğrudan bu bileşenin innerHTML ile çalışma.
• Shadow dom ile çalışmak için yepyeni bir unsur yaratmak.
• Mevcut gölgenin üzerine mi yazıyorsunuz? (Böyle bir yöntem mümkünse).

Peki aklınızda en basit ve 'SEO dostu' çözüm nedir?
nb: Çözüm, özel öğe tabanlı olmalıdır

Answer 1

Doğrudan bu bileşenin innerHTML ile çalışma.

"En basit ve" SEO dostu "çözümdür.

---

Shadow dom ile çalışmak için yepyeni bir unsur yaratmak.

Gelişmiş bir kullanıcı arayüzü tanımlayabileceğiniz için potansiyel olarak en kullanıcı dostu.

---

Mevcut gölgenin üzerine mi yazıyorsunuz?

Mümkün değil. Salt okunurdur.

---

Bu diğer SO gönderisinde, Özel Öğelerle geliştirilmiş örnek .