javascript - 将 CSS 自定义属性动态添加到 svelte 组件 3.38.0

Question

Svelte 在 3.38.0 中添加了对将 CSS 自定义属性传递给组件的支持
这允许我们传递如下所示的 css 属性。

<Drawer --test1="red">

从技术上讲，它在组件代码周围创建了一个像这样的 div:

<div style="display: contents; --test: red;">

我想做的是传递多个而不必像 --test-1="X"--test-2="Z"等定义它们。
我想将它们放在一个对象中:

let test = {
    '--test-1': "X",
    '--test-2': "Z"
};

并让键用那里的值呈现。
问题是，有没有办法实现这一目标？
用一种方法链接到 REPL 会很棒。
亲切的问候，
汤姆

Answer 1

我认为目前这是不可能的。这会很有用，所以你应该 open a feature request .
同时，您可以使用自定义包装器组件自行解决此问题。见 this REPL (相关代码如下)。

<!-- App.svelte -->
<script>
    import Example from './Example.svelte'; 
    import CustomPropWrapper from './CustomPropWrapper.svelte';
    
    const customProps = {
        '--first-color': 'red',
        '--second-color': 'green'
    }
</script>

<!-- longhand way -->
<Example --first-color={firstColor} --second-color={secondColor}></Example>

<!-- pass as an object using a wrapper -->
<CustomPropWrapper {customProps}>
    <Example />
</CustomPropWrapper>

<!-- CustomPropWrapper.svelte -->
<script>
    export let customProps = {};
    
    // create an inline style string
    $: style = Object.entries(customProps).reduce((acc, [key, value]) => `${acc}; ${key}: ${value}`, '');
</script>

<div {style}>
    <slot />
</div>

<style>
    div {
        display: contents;
    }
</style>

<!-- Example.svelte -->
<p class="first">
    I'm the first paragraph
</p>
<p class="second">
    I'm the second paragraph
</p>

<style>
    .first {
        color: var(--first-color);
    }
    
    .second {
        color: var(--second-color);
    }
</style>