Пользовательские свойства

Вы можете передавать пользовательские CSS-свойства — как статические, так и динамические — в компоненты:

<Slider
  bind:value
  min={0}
  max={100}
  --track-color="black"
  --thumb-color="rgb({r} {g} {b})"
/>

Приведённый выше код по сути преобразуется в следующий:

<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>

Для элемента SVG вместо этого будет использоваться <g>:

<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>

Внутри компонента мы можем читать эти пользовательские свойства (и предоставлять значения по умолчанию) с помощью var(...):

<style>
  .track {
    background: var(--track-color, #aaa);
  }

  .thumb {
    background: var(--thumb-color, blue);
  }
</style>

Вам не обязательно указывать значения непосредственно на компоненте; пока пользовательские свойства определены на родительском элементе, компонент может их использовать. Обычно пользовательские свойства определяются на элементе :root в глобальном стилевом файле, чтобы они применялись ко всему вашему приложению.