> 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/light-dom.md).

# light DOM

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

{% hint style="success" %} <mark style="color:yellow;">**regular**</mark> DOM <mark style="color:yellow;">**children**</mark> of a <mark style="color:purple;">**shadow host**</mark> are referred to as the “<mark style="color:orange;">**light DOM**</mark>”.
{% endhint %}

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

* if an element has [shadow DOM](/web/component/shadow-dom.md), then its <mark style="color:yellow;">**light DOM**</mark> is <mark style="color:red;">**not displayed**</mark>.
* <mark style="color:yellow;">**styles**</mark> defined beneath a [shadow root](/web/component/shadow-dom.md) are <mark style="color:orange;">**private**</mark> to that tree and will <mark style="color:red;">**never**</mark> affect the **light DOM** elements on the outside.
* [shadow root](/web/component/shadow-dom.md) can define <mark style="color:yellow;">**default styles**</mark> for its <mark style="color:orange;">**host element**</mark>, but these will be <mark style="color:red;">**overridden**</mark> by <mark style="color:yellow;">**light DOM styles**</mark>.
  {% endhint %}

{% hint style="info" %}

* <mark style="color:yellow;">**elements**</mark> in [shadow DOM](/web/component/shadow-dom.md) <mark style="color:yellow;">**will inherit**</mark> <mark style="color:green;">**font size**</mark>, <mark style="color:green;">**background color**</mark>, ... from the <mark style="color:yellow;">**light DOM**</mark>.
* <mark style="color:yellow;">**styles**</mark> in [shadow DOM](/web/component/shadow-dom.md) can use [variables](/web/css/var.md) defined in <mark style="color:yellow;">**light DOM**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}