> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/component/shadow-dom/events.md).

# shadow DOM events

[browser](/web/browser.md) ⟩ [web components](/web/component.md) ⟩ [implement](/web/component/implement.md) ⟩ [shadow DOM](/web/component/shadow-dom.md) ⟩ events 

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}

* some events are <mark style="color:yellow;">**confined**</mark> to the shadow DOM：like "<mark style="color:blue;">**load**</mark>".
* others <mark style="color:yellow;">**bubble up**</mark> and <mark style="color:orange;">**out**</mark>：like "<mark style="color:blue;">**focus**</mark>", "<mark style="color:blue;">**mouse**</mark>", "<mark style="color:blue;">**keyboard**</mark>" events.
  {% endhint %}

{% hint style="warning" %}
when an [event](/web/browser/event.md) that originates in the [shadow DOM](/web/component/shadow-dom.md) [<mark style="color:orange;">**crosses the boundary**</mark>](/web/component/shadow-dom/events/composed.md) and begins to propagate in the [light DOM](/web/component/light-dom.md), its [target](/web/component/shadow-dom/events/retarget.md) property is <mark style="color:red;">**changed**</mark> to the <mark style="color:yellow;">**shadow host**</mark> element, so it appears to have originated directly on that element.
{% endhint %}

{% hint style="success" %}
if a [web component](/web/component.md) needs to know when the <mark style="color:yellow;">**light DOM content**</mark> of a [shadow DOM](/web/component/shadow-dom.md) has <mark style="color:red;">**changed**</mark>, it can register a listener for “<mark style="color:blue;">**slotchanged**</mark>” events directly <mark style="color:yellow;">**on the element**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [retargeting](/web/component/shadow-dom/events/retarget.md)
* [Events that Cross Shadow DOM Boundary](/web/component/shadow-dom/events/composed.md)
* [Bubbling in Shadow DOM](/web/component/shadow-dom/events/bubbling.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Shadow DOM & Events](https://javascript.info/shadow-dom-events)
* [ ] Google ⟩ [The Shadow DOM event model](https://developers.google.com/web/fundamentals/web-components/shadowdom#events)
  {% endtab %}

{% tab title="👥 相關" %}

* [slotchange event](/web/component/template/slot/slotchange.md)
  {% endtab %}
  {% endtabs %}