# Use CSS Variables

[Web Components](../..) ⟩ [Shadow DOM](..) ⟩ [Styling]() ⟩

{% 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](../../../template/slot/slotted-elements#styling-slotted-content)
* [CSS Variables](../../../css/var)
{% 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 %}
