Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก
เปิดเผยส่วนต่าง ๆ ของ Shadow DOM ให้ CSS ภายนอกด้วย part และ exportparts
Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
ข้อแลกเปลี่ยนของการห่อหุ้ม
การห่อหุ้มสไตล์อย่างเข้มงวดของ DOM เงาช่วยป้องกันไม่ให้ผู้ใช้งานจัดสไตล์องค์ประกอบแต่ละรายการภายในคอมโพเนนต์ใหม่ พร็อพเพอร์ตี CSS ทำงานได้ดีกับค่าทั่วไป แต่คุณไม่สามารถกำหนดตัวอย่างเช่น border-radius แบบกำหนดเองให้กับปุ่ม "ปิด" ภายในได้ parts ช่วยแก้ปัญหานี้
แอตทริบิวต์ part
กำหนดองค์ประกอบภายในทรีเงาด้วย part="name" จากนั้นผู้ใช้งานจะสามารถเลือกองค์ประกอบนั้นด้วยองค์ประกอบเสมือน ::part(name): my-dialog::part(close-button) { color: red; } องค์ประกอบที่มีชื่อจะกลายเป็นจุดเชื่อมต่อสำหรับจัดสไตล์ ขณะที่ส่วนที่เหลือของทรีเงายังคงถูกห่อหุ้ม
// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
color: red;
border-radius: 50%;
}หลาย parts ในองค์ประกอบเดียว
คั่นชื่อด้วยช่องว่างเพื่อเปิดเผยองค์ประกอบเดียวเป็นหลาย parts: part="button primary" ::part(button) จะเลือกองค์ประกอบนี้ในลักษณะทั่วไป ส่วน ::part(primary) จะเลือกองค์ประกอบนี้ในฐานะองค์ประกอบสไตล์หลัก แต่ละชื่อจะถูกจับคู่แยกจากกัน
ข้อจำกัดของ ::part
::part อนุญาตให้ใช้คลาสเสมือนบางรายการเท่านั้น เช่น :hover, :focus และ :disabled แต่ไม่อนุญาตตัวเชื่อมองค์ประกอบลูกหลานหรือการเลือกเชิงโครงสร้างเพิ่มเติม ::part(card) p ไม่ถูกต้อง คุณไม่สามารถเข้าถึงเนื้อหาภายใน part ด้วย selector ขององค์ประกอบลูกหลานได้
exportparts ส่งต่อ parts
เมื่อคัสตอมเอลิเมนต์ซ้อนคัสตอมเอลิเมนต์อีกตัวไว้ภายในทรีเงาของตนเอง parts ขององค์ประกอบด้านในจะไม่ถูกเปิดเผยไปยังหน้าภายนอกตามปกติ แอตทริบิวต์ exportparts="close-button" บนองค์ประกอบที่ซ้อนอยู่จะส่งต่อ parts เหล่านั้นขึ้นไปยังโฮสต์ด้านนอก
// Outer shadow:
<inner-element exportparts="close-button"></inner-element>
// Page:
outer-element::part(close-button) { color: red; }การเปลี่ยนชื่อขณะส่งออก
exportparts="close-button: dismiss" จะส่งออก part ด้านในด้วยชื่อใหม่บนองค์ประกอบด้านนอก วิธีนี้ทำให้คอมโพเนนต์ด้านนอกนำเสนอชื่อที่เป็นระเบียบและไม่ขึ้นอยู่กับว่าองค์ประกอบภายในใดถูกนำมาประกอบ
parts เทียบกับพร็อพเพอร์ตีแบบกำหนดเองของ CSS
พร็อพเพอร์ตีแบบกำหนดเองใช้เปิดเผยค่า เช่น สี ระยะห่าง และแบบอักษร ส่วน parts ใช้เปิดเผยองค์ประกอบ พร้อมพื้นผิว CSS อย่างเต็มรูปแบบ ทั้งเส้นขอบ การแปลง และภาพเคลื่อนไหว ใช้พร็อพเพอร์ตีแบบกำหนดเองสำหรับโทเค็นที่ใช้ทั่วไประดับระบบ และใช้ parts สำหรับการปรับแต่งองค์ประกอบเฉพาะรายการ ทั้งสองแบบสามารถใช้ร่วมกันในคอมโพเนนต์เดียวกันได้
รูปแบบการกำหนดธีม
แนวปฏิบัติของระบบการออกแบบคือ เปิดเผย parts จำนวนเล็กน้อยสำหรับองค์ประกอบที่มักถูกปรับแต่งมากที่สุด เช่น ปุ่ม ส่วนหัว และตัวบ่งชี้ พร้อมทั้งมีพร็อพเพอร์ตีแบบกำหนดเองจำนวนมากสำหรับสี ระยะห่าง และการจัดรูปแบบตัวอักษร ผู้ใช้งานสามารถกำหนดธีมในระดับค่าหรือระดับองค์ประกอบได้ตามความต้องการ
ความเสถียรของชื่อ part
ชื่อ part จะกลายเป็นส่วนหนึ่งของ API สาธารณะของคอมโพเนนต์ การเปลี่ยนชื่อจะทำให้ CSS ของผู้ใช้งานเสียหาย เลือกชื่อที่อธิบายบทบาทขององค์ประกอบ เช่น "close-button", "header" และ "track" แทนชื่อที่บอกตำแหน่ง เช่น "first-button" เพื่อให้ API ยังคงมีความหมายเมื่อการทำงานภายในพัฒนาไป
คำแนะนำด้านเอกสาร
ระบุ parts และ parts ที่ส่งออกทั้งหมดที่มีในเอกสารของคอมโพเนนต์ หากไม่มีเอกสาร ผู้ใช้งานจะต้องตรวจสอบ DOM เพื่อค้นหา parts ซึ่งทำให้ผูกกับสิ่งที่บังเอิญพบ Treat รายการ parts เช่นเดียวกับรายการ props ของคอมโพเนนต์ในเฟรมเวิร์ก
การรองรับของเบราว์เซอร์
::part และ exportparts มีให้ใช้งานในเบราว์เซอร์สมัยใหม่ทั้งหมด แม้แต่ Safari รุ่นเก่าก็รองรับ ::part แล้ว จึงใช้งานได้อย่างเต็มที่ สำหรับเบราว์เซอร์เก่ามาก ซึ่งส่วนใหญ่เลิกใช้งานแล้ว ให้ใช้พร็อพเพอร์ตีแบบกำหนดเองของ CSS เพิ่มเติมเป็นทางแก้สำรอง
ตรวจสอบความเข้าใจ
แอตทริบิวต์ exportparts ทำหน้าที่อะไร
สรุป
แอตทริบิวต์ part เปิดเผยองค์ประกอบแต่ละรายการในทรีเงาเพื่อให้จัดสไตล์จากภายนอกผ่าน ::part(name) ได้ โดยยังคงความสามารถของ CSS ไว้อย่างเต็มที่และไม่ทำลายการห่อหุ้ม exportparts ส่งต่อ parts จากคัสตอมเอลิเมนต์ที่ซ้อนอยู่ขึ้นไปยังโฮสต์ด้านนอก และสามารถเปลี่ยนชื่อได้ตามต้องการ ใช้ parts ร่วมกับพร็อพเพอร์ตีแบบกำหนดเองของ CSS เพื่อสร้างพื้นผิวสำหรับกำหนดธีมที่ครบถ้วน และจัดทำเอกสารรายการ part ให้เป็นส่วนหนึ่งของ API ของคอมโพเนนต์
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก”
เปิดเผยส่วนต่าง ๆ ของ Shadow DOM ให้ CSS ภายนอกด้วย part และ exportparts คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- attachShadow และ Shadow Root
- องค์ประกอบ Slot สำหรับการกระจายเนื้อหา
- สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM
- Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก