mirror of https://github.com/sveltejs/svelte
58 lines
1.4 KiB
58 lines
1.4 KiB
---
|
|
title: Custom properties
|
|
---
|
|
|
|
You can pass CSS custom properties — both static and dynamic — to components:
|
|
|
|
```svelte
|
|
<Slider
|
|
bind:value
|
|
min={0}
|
|
max={100}
|
|
--track-color="black"
|
|
--thumb-color="rgb({r} {g} {b})"
|
|
/>
|
|
```
|
|
|
|
The above code essentially desugars to this:
|
|
|
|
```svelte
|
|
<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
|
|
<Slider
|
|
bind:value
|
|
min={0}
|
|
max={100}
|
|
/>
|
|
</svelte-css-wrapper>
|
|
```
|
|
|
|
For an SVG element, it would use `<g>` instead:
|
|
|
|
```svelte
|
|
<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
|
|
<Slider
|
|
bind:value
|
|
min={0}
|
|
max={100}
|
|
/>
|
|
</g>
|
|
```
|
|
|
|
Inside the component, we can read these custom properties (and provide fallback values) using [`var(...)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):
|
|
|
|
```svelte
|
|
<style>
|
|
.track {
|
|
background: var(--track-color, #aaa);
|
|
}
|
|
|
|
.thumb {
|
|
background: var(--thumb-color, blue);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
You don't _have_ to specify the values directly on the component; as long as the custom properties are defined on a parent element, the component can use them. It's common to define custom properties on the `:root` element in a global stylesheet so that they apply to your entire application.
|
|
|
|
> [!NOTE] While the extra element will not affect layout, it _will_ affect any CSS selectors that (for example) use the `>` combinator to target an element directly inside the component's container.
|