สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM
เขียน CSS ที่มีผลเฉพาะกับองค์ประกอบภายในต้นไม้เงา
สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
การห่อหุ้ม CSS โดยค่าเริ่มต้น
กฎ <style> ทุกกฎภายในรูทเงาจะมีผลเฉพาะภายในรูทนั้นเท่านั้น p { color: red } ในทรีเงาจะทำให้เฉพาะย่อหน้าภายในทรีเงานั้นเป็นสีดังกล่าว ย่อหน้าในเอกสารหลักจะไม่ได้รับผล และสไตล์จากเอกสารหลักก็ไม่สามารถเข้ามาภายในทรีเงาได้
เหตุใดการห่อหุ้มจึงสำคัญ
การห่อหุ้มช่วยขจัดปัญหา CSS แบบรวมศูนย์ที่สร้างความยุ่งยากให้แอปพลิเคชันขนาดใหญ่มานานหลายทศวรรษ สไตล์ของคอมโพเนนต์จะไม่ถูก CSS ของเว็บไซต์เขียนทับโดยไม่ตั้งใจ และคอมโพเนนต์ก็ไม่สามารถทำให้เว็บไซต์เสียหายโดยบังเอิญได้ ขอบเขตนี้กำหนดโดยข้อกำหนด ไม่ใช่ธรรมเนียมการเขียนโค้ด
คลาสเสมือน :host
จากภายในทรีเงา ให้จัดสไตล์องค์ประกอบโฮสต์ด้วย :host ใช้ :host(selector) เพื่อจำกัดขอบเขตด้วย selector: :host([open]) { display: block; } จะตรงกับโฮสต์เฉพาะเมื่อมีแอตทริบิวต์ open อยู่เท่านั้น
พร็อพเพอร์ตีที่สืบทอดยังข้ามขอบเขตได้
พร็อพเพอร์ตี CSS ที่สืบทอด เช่น color, font-family และ line-height ยังคงข้ามขอบเขตของทรีเงาผ่านการสืบทอดได้ การกำหนด body { color: blue } ในเอกสารจะทำให้ข้อความในทรีเงาเป็นสีน้ำเงินด้วย เว้นแต่ทรีเงาจะกำหนดค่าใหม่อย่างชัดเจน นี่เป็นคุณสมบัติที่มีประโยชน์ เพราะค่าเริ่มต้นด้านการจัดรูปแบบตัวอักษรยังคงสอดคล้องกัน
พร็อพเพอร์ตีแบบกำหนดเองของ CSS ทะลุขอบเขตได้
พร็อพเพอร์ตีแบบกำหนดเอง หรือ CSS variables จะสืบทอดผ่านรูทเงาได้ จึงเป็นวิธีมาตรฐานในการเปิดเผย API สำหรับกำหนดธีมของคอมโพเนนต์ ประกาศ --card-bg: var(--surface, white) ภายในทรีเงา แล้วให้ผู้ใช้งานเขียนทับ --surface บนโฮสต์
/* Shadow */
:host {
background: var(--card-bg, white);
}
/* Page */
my-card {
--card-bg: #f3f4f6;
}::part สำหรับการจัดสไตล์จากภายนอก
กำหนดองค์ประกอบภายในทรีเงาด้วย part="name" แล้วผู้ใช้งานจะสามารถจัดสไตล์องค์ประกอบนั้นด้วย my-card::part(name) { ... } ใช้ parts เป็นจุดเชื่อมต่อสำหรับจัดสไตล์องค์ประกอบแต่ละรายการ ขณะเดียวกันยังคงห่อหุ้มส่วนใหญ่ของทรีเงาไว้
สไตล์ชีตที่นำมาใช้ซ้ำ
shadowRoot.adoptedStyleSheets = [sheet] ช่วยแชร์ CSSStyleSheet เดียวกันระหว่างรูทเงาหลายรูท จึงไม่ต้องวิเคราะห์แท็ก <style> ซ้ำ ๆ สร้างสไตล์ชีตด้วย new CSSStyleSheet() และ sheet.replaceSync(cssText) ช่วยเพิ่มประสิทธิภาพได้มากในระบบการออกแบบ
ลำดับการประกาศ
วางแท็ก <style> ไว้บนสุดของ innerHTML ในทรีเงา เพื่อให้วิเคราะห์สไตล์ก่อนสร้าง DOM ส่วนที่เหลือ วิธีนี้ช่วยหลีกเลี่ยงการกะพริบชั่วคราวของเนื้อหาที่ยังไม่มีสไตล์ ซึ่งเกิดขึ้นเมื่อสไตล์มาถึงล่าช้าในลำดับการวิเคราะห์โครงสร้าง
:host-context สำหรับกฎที่อิงตามองค์ประกอบบรรพบุรุษ
:host-context(.dark-mode) :host ใช้จัดสไตล์โฮสต์โดยอิงจาก selector ขององค์ประกอบบรรพบุรุษภายนอกทรีเงา มีประโยชน์สำหรับการกำหนดธีมให้คอมโพเนนต์ตามคลาสบนตัวห่อหุ้มระดับสูง เบราว์เซอร์รองรับได้ดี แต่ควรตรวจสอบกับชุดเบราว์เซอร์เป้าหมายของคุณ
การรีเซ็ตทั่วโลกยังคงอยู่นอกทรีเงา
การรีเซ็ต CSS ที่ใช้ทั่วทั้งเอกสาร เช่น ระยะขอบบน body และ box-sizing จะไม่ส่งผลต่อทรีเงา ให้ใช้การรีเซ็ตที่จำเป็นซ้ำภายในรูทเงาแต่ละรูท หรือแชร์ผ่านสไตล์ชีตที่สร้างขึ้นและนำไปใช้ในทุกคอมโพเนนต์
การแก้ไขข้อบกพร่องของสไตล์เงา
Chrome DevTools แสดงรูทเงาในแผง Elements ภายใต้ "#shadow-root (open)" คุณสามารถตรวจสอบ แก้ไข และเปิดหรือปิดสไตล์ของทรีเงาได้เช่นเดียวกับ CSS อื่น ๆ รวมถึงคลาสเสมือน :host และกฎ ::part
ตรวจสอบความเข้าใจ
เหตุใดพร็อพเพอร์ตีแบบกำหนดเองของ CSS หรือ variables จึงเป็นวิธีที่แนะนำสำหรับกำหนดธีมให้คอมโพเนนต์ DOM เงา
สรุป
DOM เงาจะห่อหุ้มสไตล์ไว้ทั้งสองทิศทาง จัดสไตล์โฮสต์ด้วย :host เปิดเผยจุดเชื่อมต่อสำหรับกำหนดธีมผ่านพร็อพเพอร์ตีแบบกำหนดเองของ CSS ที่สืบทอดมา เปิดเผยองค์ประกอบแต่ละรายการเพื่อจัดสไตล์ด้วย ::part แชร์สไตล์ชีตด้วย adoptedStyleSheets และใช้การรีเซ็ตซ้ำภายในรูทเงาแต่ละรูท เนื่องจาก CSS ที่ครอบคลุมทั้งเอกสารไม่สามารถข้ามขอบเขตได้
คำถามที่พบบ่อย
บทเรียน “สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM”
เขียน CSS ที่มีผลเฉพาะกับองค์ประกอบภายในต้นไม้เงา คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- attachShadow และ Shadow Root
- องค์ประกอบ Slot สำหรับการกระจายเนื้อหา
- สไตล์แบบจำกัดขอบเขตภายใน Shadow DOM
- Part และ Exportparts สำหรับการกำหนดรูปแบบภายนอก