ขยาย HTMLSelectElement

loïc Torres 2020-09-02 08:57.

เมื่อเร็ว ๆ นี้ฉันพยายามขยาย 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: โซลูชันต้องเป็นแบบกำหนดเองตามองค์ประกอบ

javascript shadow-dom custom-element

1 answers

Supersharp 2020-09-04 00:42.

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

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

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

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

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

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

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

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: ทุกสิ่งที่เธอพูดเกี่ยวกับความรักและกรอบเวลา 5 ปีของเธอเพื่อค้นหา 'หนึ่ง'

Jana Duggar เปิดใจเกี่ยวกับการค้นหาความรักของเธอ นี่คือทุกสิ่งที่เธอพูดเกี่ยวกับหัวข้อและกรอบเวลา 5 ปีสำหรับการแต่งงาน

2023-06-12.

แซม ฮิวแฮนรู้ดีว่าเขาจะได้อะไรจากฉาก 'Outlander' — 'ฉันรู้สึกเหมือนตัวเองเป็นเจมี่เมื่อใส่มันลงไป'

เมื่อเร็ว ๆ นี้ แซม ฮิวแฮน นักแสดงจากเรื่อง 'Outlander' ได้เปิดเผยสิ่งที่เขาจะทำจากกองถ่ายเพื่อระลึกถึงเจมี เฟรเซอร์ บทบาทที่ทำให้เขากลายเป็นดารา

2023-06-12.

เพลงของบีทเทิลยุคแรกซึ่งเป็นหนึ่งใน 'การแสดงที่น่าตื่นเต้นที่สุด' ของวง อ้างอิงจากวงในของ Fab Four

'She Loves You' เขียนขึ้นในหนึ่งชั่วโมง บันทึกเสียงในหนึ่งวัน และเป็นเพลงของ The Beatles ที่มีการแสดงที่ดีที่สุดเพลงหนึ่งในอาชีพของพวกเขา

2023-06-11.

Dolly Parton ช่วยคุณยายที่ 'ไม่ถูกต้อง' ของเธอ เมื่อไม่มีหลานคนอื่นๆ อยากทำ—เธอก็จะแกล้งเธอด้วย

Dolly Parton และคุณย่า Bessie มีความสัมพันธ์พิเศษ คุณยายพาร์ตันป่วยหนัก แต่นั่นไม่ได้ทำให้ดอลลี่หยุดแกล้งเธอ

2023-06-11.

ไม้ชนิดใดที่แข็งที่สุดในโลก?

คุณอาจคิดว่าไม้โอ๊คหรือฮิคคอรีเป็นไม้ที่แข็ง แต่เมื่อต้องพูดถึงไม้ที่แข็งที่สุดในโลกแล้ว พวกมันกลับไม่ใกล้เคียงเลย

2025-10-29.

10 สิ่งมีชีวิตใต้ทะเลที่น่ากลัวที่สุดที่แฝงตัวอยู่ในส่วนลึกของมหาสมุทร

มหาสมุทรเต็มไปด้วยความงาม แต่ก็ซ่อนสิ่งมีชีวิตใต้ท้องทะเลที่น่ากลัวที่สุดบางชนิดไว้เช่นกัน สัตว์เหล่านี้หลายชนิดซ่อนตัวอยู่ใต้ผิวน้ำอันมืดมิด ในโลกใต้ทะเลลึกอันแสนกดดันและมืดมิด

2025-10-29.

10 สุดยอดการร่ายมนตร์ดาบใน Minecraft

หากคุณกำลังต่อสู้กับศัตรูหรือกำลังเตรียมตัวสำหรับโหมด PvP การรู้ถึงการเสริมพลังดาบที่ดีที่สุดใน Minecraft จะช่วยให้คุณได้เปรียบอย่างมาก การเสริมพลังดาบจะช่วยให้คุณสร้างความเสียหายได้มากขึ้น เพิ่มจำนวนม็อบที่ดรอป และเพิ่มความทนทานของดาบ

2025-10-29.

13 ประเทศสังคมนิยมที่ดูแตกต่างกันอย่างมาก

เมื่อผู้คนพูดถึงประเทศสังคมนิยม พวกเขามักจะนึกถึงการควบคุมโดยรัฐบาลอย่างเต็มรูปแบบโดยไม่มีกรรมสิทธิ์ส่วนบุคคล แต่ในทางปฏิบัติ เศรษฐกิจแบบสังคมนิยมมีความหลากหลายอย่างมาก

2025-10-29.

ที่ 9,800 เหรียญสหรัฐ คุณจะ 'แพ็ค 'Em In' ใน Toyota RAV4 7 ที่นั่งปี 2008 นี้หรือไม่?

RAV4 นี้อ้างว่าอยู่ในสภาพที่ดีเยี่ยมและมีไว้สำหรับการเล่นเก้าอี้ดนตรี

2024-07-03 19:04.

การแสดง Black Panther ของ Marvel จะเป็นการแสดงแอนิเมชั่นที่สำคัญที่สุด

Eyes of Wakanda เชื่อมโยงโดยตรงกับ MCU พร้อมอัปเดตเกี่ยวกับ X-Men '97, What If..., Daredevil และอีกมากมาย

2024-07-03 19:03.

ประวัติการออกเดทของ Ava Gardner: ย้อนมองการแต่งงานและความโรแมนติกของไอคอนแห่งฮอลลีวูด

Ava Gardner แต่งงานกับ Mickey Rooney และ Frank Sintra และเธอยังคบหาดูใจกับดาราฮอลลีวูดอีกหลายคน ต่อไปนี้คือประวัติการออกเดทของ Ava Gardner

2024-06-23.

ภรรยาของจอห์น คลีส คือใคร? ข้อมูลทั้งหมดเกี่ยวกับเจนนิเฟอร์ เวด

จอห์น คลีส แต่งงานกับเจนนิเฟอร์ เวด ภรรยาของเขาในปี 2012 นี่คือทุกสิ่งที่คุณต้องรู้เกี่ยวกับเจนนิเฟอร์ เวด ภรรยาของจอห์น คลีส

2024-06-16.

ภรรยาของไมเคิล ซี. ฮอลล์คือใคร? ข้อมูลทั้งหมดเกี่ยวกับมอร์แกน แม็คเกรเกอร์

Michael C. Hall แต่งงานกับ Morgan Macgregor ภรรยาของเขาตั้งแต่ปี 2016 นี่คือทุกสิ่งที่คุณต้องการทราบเกี่ยวกับภรรยาของ Michael C. Hall

2023-12-31.

สามีของ Mena Suvari คือใคร? เกี่ยวกับ ไมเคิล โฮป

Mena Suvari แต่งงานกับ Michael Hope สามีของเธอมาตั้งแต่ปี 2018 นี่คือทุกสิ่งที่ควรรู้เกี่ยวกับสามีของ Mena Suvari

2023-11-05.

สรรพนามน่ากลัวมาก

มันทำให้ฉันประหลาดใจ ทันใดนั้นมันก็เกิดขึ้นบ่อยๆ มันอยู่กลางทางอีกครั้ง <ไม่ ไม่ใช่คนในมหาสมุทรแปซิฟิก คุณเป็นสีน้ำตาลแดง คนที่งานคาร์นิวัล> ทุกพาดหัวข่าวดัง…..

3 วิธีที่พิสูจน์แล้วในการพัฒนาทักษะการเขียนของคุณ

ประโยชน์ของการเขียนและกลยุทธ์ที่จะช่วยให้คุณทำได้

ในปี 2022 ด้วยการเปิดตัว GPT-3 ทักษะการเขียนดูเหมือนจะมีความสำคัญน้อยลง ด้วย AI คนที่เขียนไม่ดีก็สามารถสร้างพนักงานที่มีคุณภาพได้เช่นกัน

การพังทลายอย่างช้าๆ: เปิดเผยวิธีที่ผู้คนสูญเสียไปในอาชีพของพวกเขา

ในโลกที่เปลี่ยนแปลงอย่างรวดเร็วและการแข่งขันในปัจจุบัน อาชีพของคนๆ หนึ่งมีบทบาทสำคัญในการเติบโตส่วนบุคคล ความมั่นคงทางการเงิน และความพึงพอใจในชีวิตโดยรวม อย่างไรก็ตาม ผู้คนจำนวนมากพบว่าตัวเองติดอยู่ในวงจรของความเมื่อยล้าและความไม่พอใจอย่างไม่หยุดยั้ง ค่อยๆ สูญเสียชีวิตการทำงานไป

อะไรทำให้พอดคาสต์มีอิทธิพล?

เมื่อสัปดาห์ที่แล้วฉันสังเกตเห็นข่าวประชาสัมพันธ์ที่เผยแพร่ผ่าน PressGazette (เว็บไซต์ข่าวของสื่ออังกฤษ) บทความประกาศว่า Acast ซึ่งเป็นบริษัทโฮสติ้งและโฆษณาพอดคาสต์ของ Scandi จะเป็นผู้นำกลุ่มผู้เผยแพร่ "อาจมีอิทธิพลมากที่สุด" ในพอดคาสต์