自定义属性

你可以将 CSS 自定义属性（静态和动态）传递给组件：

¥You can pass CSS custom properties — both static and dynamic — to components:

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

上面的代码基本上是这样的：

¥The above code essentially desugars to this:

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

¥For an SVG element, it would use <g> instead:

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

在组件内部，我们可以使用 var(...) 读取这些自定义属性（并提供后备值）：

¥Inside the component, we can read these custom properties (and provide fallback values) using var(...):

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

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

你不必直接在组件上指定值；只要在父元素上定义了自定义属性，组件就可以使用它们。通常在全局样式表中的 :root 元素上定义自定义属性，以便它们应用于整个应用。

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

虽然额外的元素不会影响布局，但它会影响任何 CSS 选择器（例如）使用 > 组合器直接定位组件容器内的元素。

¥[!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.