> 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/styles/css-vars.md).

# Use CSS Variables

[Web Components](/web/component.md) ⟩ [Shadow DOM](/web/component/shadow-dom.md) ⟩ [Styling](/web/component/shadow-dom/styles.md) ⟩

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

* Google ⟩ Web Component ⟩ [Creating style hooks using CSS custom properties](https://developers.google.com/web/fundamentals/web-components/shadowdom#stylehooks)
  {% endtab %}

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

* [Styling Slotted Content](/web/component/template/slot/slotted-elements.md#styling-slotted-content)
* [CSS Variables](/web/css/var.md)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}

* ⭐️ use **CSS variables**: \
  CSS variables exist **on all levels**, **both in light and shadow**.\
  📗 JS.info ⟩ [CSS hooks with custom properties](https://javascript.info/shadow-dom-style#css-hooks-with-custom-properties)
  {% endhint %}

{% tabs %}
{% tab title="html" %}

```markup
<style>
  fancy-tabs {
    margin-bottom: 32px;
    --fancy-tabs-bg: black;  <!-- ⭐️ css var -->
  }
</style>
<fancy-tabs background>...</fancy-tabs>
```

{% endtab %}

{% tab title="shadow DOM" %}

```css
/* inside shadow DOM */
:host([background]) {
  background: var(--fancy-tabs-bg, #9E9E9E);    /* ⭐️ css hook */
  border-radius: 10px;
  padding: 10px;
}
```

{% endtab %}
{% endtabs %}