Svelte组件中mix-blend-mode属性失效问题排查

我开发了一个SvelteKit自定义光标库，但mix-blend-mode CSS属性无法正常生效。以下是我的Cursor.svelte文件代码：

<script>
    import { onMount } from 'svelte';

    const baseSize = 20;
    export let size = 20;
    export let color = 'black';
    export let shape = 'circle';
    export let mixBlendMode = 'none';
    let x = -100;
    let y = -100;

    onMount(() => {
    // some code
    });
</script>

<div class="cursor-wrapper" style="--x:{x}px; --y:{y}px">
    <div
        class="custom-cursor {shape}"
        style="transform: translate(-50%, -50%) scale({size /
            baseSize}); width: {baseSize}px; height: {baseSize}px; --mix-blend-mode: {mixBlendMode}; --background-color: {color}"
    />
</div>

<style>
    .cursor-wrapper {
        --x: -100px;
        --y: -100px;
        position: fixed;
        left: 0;
        top: 0;
        transform: translate(var(--x), var(--y));
        pointer-events: none;
        cursor: none;
    }
    .custom-cursor {
        --background-color: 'black';
        --mix-blend-mode: 'none';
        left: 50%;
        top: 50%;
        background-color: var(--background-color);
        mix-blend-mode: var(--mix-blend-mode);
        border-radius: 50%;
        z-index: 99999;
        /* Customize your cursor styles here */
        transition: transform 0.2s cubic-bezier(0.28, 0.8, 0.36, 1);
    }
    .custom-cursor.square {
        border-radius: 0;
    }
    .cursor-none {
        cursor: none;
    }
</style>

目前其他属性均正常工作，仅mix-blend-mode属性失效，请问可能的故障原因是什么？

核心原因：CSS变量初始值的引号错误 #

在<style>的.custom-cursor规则中，你给--mix-blend-mode和--background-color设置的初始值带了单引号（'none'、'black'），但CSS属性值不需要引号。浏览器会把带引号的字符串当作无效值处理，导致mix-blend-mode无法正确读取变量。

其他验证点 #

• 确认传递的mixBlendMode值是有效的CSS混合模式关键字（如multiply、screen、difference等），避免传入带引号的字符串。
• 父元素的pointer-events: none不影响混合模式生效，混合模式只与元素的堆叠上下文、下方的内容有关。

修复步骤 #

1. 移除CSS变量初始值的单引号：

.custom-cursor {
    --background-color: black;
    --mix-blend-mode: none;
    /* 其余样式保持不变 */
}

2. 确保内联样式传递的mixBlendMode值为纯关键字（无引号），比如组件使用时传入mixBlendMode="multiply"。

修改后，mix-blend-mode就能正常读取CSS变量的值，实现预期的混合效果。

内容的提问来源于stack exchange，提问作者dayo