การ Encapsulate สไตล์

Shadow boundary คืออะไร?

Shadow boundary คือเส้นกั้นที่ป้องกันไม่ให้ CSS รั่วผ่าน shadow root เส้นกั้นนี้ทำงานสองทิศทาง:

• สไตล์ที่ประกาศ ภายใน shadow root จะไม่ส่งผลต่อ element ใดๆ ใน light DOM
• selector CSS จาก ภายนอก shadow root ไม่สามารถกำหนดเป้าหมาย element ภายใน shadow tree ได้

ลักษณะนี้เรียกว่า style encapsulation และเป็นหนึ่งในคุณประโยชน์หลักของ Shadow DOM

ตัวอย่าง: สไตล์ที่ขัดแย้งกัน

ตัวอย่างด้านล่างกำหนด .box สองแบบ: หนึ่งในหน้า (สีน้ำเงิน) และอีกหนึ่งภายใน shadow root (สีแดง) เนื่องจาก shadow boundary แต่ละอันจะใช้เฉพาะกับ element ของตัวเอง

HTMLCSSJS

<div class="box">Blue — page style (outside shadow)</div><enc-demo></enc-demo>

🧩 ขอบเขต Shadow เป็นกำแพงสองทาง

สไตล์ภายในไม่สามารถหลุดออกไปได้ และสไตล์ภายนอกไม่สามารถเข้ามาได้ (ยกเว้น CSS custom properties และ ::part)

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
Style encapsulation (shadow boundary)	สไตล์ของ component ไม่ชนกับสไตล์หน้าโดยไม่ตั้งใจ ปลอดภัยต่อการนำไปใช้ซ้ำ	ธีมจากภายนอกเข้าถึง internal ไม่ได้โดยตรง ต้องพึ่ง CSS custom properties หรือ ::part แทน
ไม่ใช้ Shadow DOM (global CSS ธรรมดา)	ปรับสไตล์จากภายนอกได้อิสระ ไม่ต้องเปิด API เพิ่ม	เสี่ยง class name ชนกัน และสไตล์รั่วเข้า-ออกโดยไม่ตั้งใจเมื่อโปรเจกต์โต

ข้อผิดพลาดที่พบบ่อย

• คาดหวังให้ CSS หน้าเว็บ selector ธรรมดาเข้าไปสไตล์ภายใน shadow root ได้ — เช่นเขียน .my-widget .title { color: red } แล้วสงสัยว่าทำไมไม่ทำงาน shadow boundary ถูกออกแบบมาให้กันแบบนี้โดยเจตนา
• ลืมว่า class name ข้างในและข้างนอก shadow root เป็นคนละ scope — ตั้ง .box ทั้งสองฝั่งแล้วคิดว่าต้องแก้ไขให้ไม่ชนกัน ทั้งที่จริงๆ ไม่ชนกันอยู่แล้วเพราะ encapsulation
• ไม่รู้ว่ามี escape hatch อย่าง CSS custom properties และ ::part — พอ styling จากภายนอกไม่ได้เลยเลิกใช้ Shadow DOM ทั้งที่ควรออกแบบ custom property API ให้ theme ได้แบบควบคุมได้

💡 ตัวอย่างจากของจริง

Salesforce Lightning (LWC) — ใช้ style encapsulation เพื่อให้ component นับพันตัวจากทีมต่างๆ ไม่ชนสไตล์กันใน enterprise app ขนาดใหญ่

YouTube — video player component ใช้ encapsulation กันไม่ให้สไตล์ของหน้าเว็บ YouTube ที่เปลี่ยนบ่อยไปกระทบ UI ของ player

CSS ของหน้าประกาศ `.title { color: red; }` กฎนี้จะส่งผลต่อ element `.title` ภายใน shadow root หรือไม่?

ใช่ สไตล์หน้าชนะเสมอเพราะ specificity ใช่ แต่เฉพาะเมื่อ shadow root ใช้ mode: "open" ไม่ สไตล์หน้าไม่สามารถเจาะ shadow boundary ได้ ไม่ นอกจาก element นั้นจะมี id attribute ด้วย

shadow root มี `<style>p { font-size: 2rem; }</style>` กฎนี้ส่งผลต่อ element ใด?

`<p>` ทุกตัวในหน้า เฉพาะ `<p>` ภายใน shadow tree นั้น เฉพาะ `<p>` ที่เป็น direct children ของ host `<p>` ทุกตัวภายใน host element และ descendants

อะไรที่สามารถข้าม shadow boundary ได้?

Class selector จาก page stylesheet ID selector จาก page stylesheet CSS custom property (variable) ที่กำหนดบน host Universal selector `*` ใน page stylesheet

ประโยชน์หลักของ style encapsulation ใน Shadow DOM คืออะไร?

CSS parsing เร็วขึ้น รองรับ dark mode อัตโนมัติ สไตล์ของ component ไม่ชนกันโดยไม่ตั้งใจกับสไตล์ของหน้าหรือ component อื่น ไม่จำเป็นต้องใช้ inline styles อีกต่อไป

Submit

Mark as complete