retargeting

browser ⟩ web components ⟩ implement ⟩ shadow DOM ⟩ events ⟩ retarget

⭐️ 重點

• Events that happen in shadow DOM have the host element as the target, when caught outside of the component. 👉 see: tab 1️⃣

• Retargeting doesn't occur if the event occurs on a slotted element, that physically lives in the light DOM. 👉 see: tab 2️⃣

1️⃣

💾 replit (live demo below on codepen)

2️⃣

💾 replit (live demo below on codepen)

• 注意：按在 "Name:" 標籤上時，結果是：

inner target: <B>
outer target: <USER-CARD>

• 按在黃色背景的 "John Smith" 上時 (⭐️ 這是一個 slotted element)，結果是：

inner target: <SPAN>
outer target: <SPAN>