ขยาย 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 ของส่วนประกอบนี้
• การสร้างองค์ประกอบใหม่ล่าสุดเพื่อทำงานกับ Shadow Dom
• เขียนทับเงาที่มีอยู่? (หากวิธีดังกล่าวอาจมีอยู่)

แล้วสิ่งที่อยู่ในใจของคุณคือโซลูชันที่ง่ายที่สุดและเป็นมิตรกับ SEO?
nb: โซลูชันต้องเป็นแบบกำหนดเองตามองค์ประกอบ

Answer 1

ทำงานโดยตรงกับ innerHTML ของส่วนประกอบนี้

เป็นโซลูชันที่ "ง่ายที่สุดและเป็นมิตรกับ SEO"

---

การสร้างองค์ประกอบใหม่ล่าสุดเพื่อทำงานกับ Shadow Dom

เป็นไปได้ที่จะใช้งานง่ายที่สุดเนื่องจากคุณสามารถกำหนด UI ขั้นสูงได้

---

เขียนทับเงาที่มีอยู่?

เป็นไปไม่ได้. เป็นแบบอ่านอย่างเดียว

---

ตัวอย่างการปรับปรุงด้วยองค์ประกอบที่กำหนดเองที่นี่ในโพสต์ SO อื่น ๆนี้