# light DOM

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [web components](https://lochiwei.gitbook.io/web/component) ⟩ [implement](https://lochiwei.gitbook.io/web/component/implement) ⟩ [shadow DOM](https://lochiwei.gitbook.io/web/component/shadow-dom) ⟩ 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](https://lochiwei.gitbook.io/web/component/shadow-dom "mention"), 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](https://lochiwei.gitbook.io/web/component/shadow-dom) 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](https://lochiwei.gitbook.io/web/component/shadow-dom) 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](https://lochiwei.gitbook.io/web/component/shadow-dom "mention") <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](https://lochiwei.gitbook.io/web/component/shadow-dom "mention") can use [var](https://lochiwei.gitbook.io/web/css/var "mention") defined in <mark style="color:yellow;">**light DOM**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}