（（为每个Svelte组件在STYLE元素中创建动态CSS的替代方法）

Question

我正在通过转换现有的（proof concept）国际象棋自定义元素/ WebComponent来学习Svelte。

一个目标是突出显示拖动的棋子可以移动到的正方形

在我的自定义元素中，使用样式表非常容易（在board shadowDOM !!!内部）

<style id="moveFromSquare"></style>

然后鼠标在正方形上创建具有正确正方形名称的CSS（对于屏幕截图：局部变量at='D5'和piece='black-knight'）

let squareMouseEnter = () => {
    [boardcustomelement].root.querySelector('moveFromSquare').innerHTML=
    piece
      ? `div[at=  "{at}"  ]{
            box-shadow: inset 0 0 var(--boxshadow-size) var(--boxshadow-color);
         }
         div[defenders*=  "{at}"  ]{
            font-weight:bold;
            color:green;
            box-shadow: inset 0 0 var(--boxshadow-size) var(--boxshadow-color);
        }`
      : ''
}

无需循环遍历先前的正方形以清除类名，无需再次遍历正方形来设置类名

但是我正在学习斯维尔特...

一切都是苗条的对象：板，正方形，块（在正方形内部）

[一个页面上可以有多个Board，由于没有shadowDOM，请应用我的CSS方法：

• 我需要获得一个Board的svelte-xxxxx className（什么是更简单的方法？）
• 然后使用<STYLE> className为每个板创建一个（全局）svelte-xxxxx元素，每个都需要

但是我想知道是否还有其他（反应性）Svelte创建方式？

Answer 1

[我现在（现在）是在（Svelte）DIV（板子节点）中创建动态CSS。而不是将其传输到Components STYLE元素：

<script>
    import {afterUpdate} from 'svelte';
    let DynamicStyleDIV;
    let parentClass;
    let square='D3';//todo handle dynamic update
    let CSS = x => `{${x}}`;

    afterUpdate(()=>{
        parentClass = DynamicStyleDIV.parentNode.className;
        let selector = DynamicStyleDIV.className+'-style';
        setTimeout(() => document.getElementById(selector).innerHTML = DynamicStyleDIV.innerHTML);
    })
</script>


<div bind:this={DynamicStyleDIV} hidden>
    .{parentClass} div[at="{square}"][at="{square}"]{CSS('background:gold')}
</div>


<style>
    div{/*required because an empty style element is ignored*/}
</style>