Shadow DOM

Shadow DOM คืออะไร?

Shadow DOM คือ browser API ที่ให้คุณแนบ private DOM tree ที่มีขอบเขต กับ HTML element ใดก็ได้ tree ส่วนตัวนั้นเรียกว่า shadow tree และ element ที่ถูกแนบเรียกว่า host element ส่วนที่เหลือของหน้า — document tree ปกติ — เรียกว่า light DOM

shadow tree แยกออกจาก light DOM อย่างสมบูรณ์ สไตล์ที่เขียนภายในจะไม่รั่วออกไปสู่หน้า และสไตล์ของหน้าไม่สามารถสไตล์ element ภายใน shadow tree ได้โดยไม่ตั้งใจ นี่คือความหมายของ “encapsulation” ในบริบทของ web components

แนวคิดหลัก

คำศัพท์	ความหมาย
Host element	Element ที่เป็นเจ้าของ shadow root (เช่น `<my-card>`)
Shadow root	โหนดรากของ shadow tree ที่ได้รับคืนจาก `attachShadow()`
Shadow tree	โหนดทั้งหมดภายใน shadow root
Light DOM	document tree หลัก — ทุกอย่างนอก shadow root
Encapsulated styles	CSS ที่ประกาศภายใน shadow root ซึ่งมีขอบเขตเฉพาะใน shadow tree เท่านั้น

โครงสร้าง Shadow DOM

flowchart LR
  LD["Light DOM"]
  HE["Host Element"]
  SR["Shadow Root"]
  ST["Shadow Tree"]
  IS["Internal <style>"]
  LD --> HE
  HE --> SR
  SR --> ST
  SR --> IS

โครงสร้าง Shadow DOM

บทเรียนในโมดูลนี้

บทเรียน	หัวข้อ
1	Shadow DOM — ภาพรวมและโครงสร้าง (หน้านี้)
2	การแนบ Shadow Root — `attachShadow`, `shadowRoot.innerHTML`
3	การ Encapsulate สไตล์ — shadow boundary, scoped CSS
4	โหมด Open และ Closed — `mode: 'open'` กับ `mode: 'closed'`
5	Host Element และ Shadow Boundary — `:host`, `:host(selector)`, event retargeting

ตัวอย่างที่รันได้

element ด้านล่างแนบ shadow root และแสดงข้อความทักทายพร้อมสไตล์ทั้งหมดภายใน shadow tree สีน้ำเงินมาจาก <style> tag ที่วางไว้ภายใน shadow root — ไม่ใช่จากหน้า

<shadow-hello></shadow-hello>