# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/component/shadow-dom/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.