0

我通过转换我现有的（证明概念）国际象棋自定义元素/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);
        }`
      : ''
}

无需遍历先前的方块来清理类名，
无需再次遍历方块来设置类名

但我正在学习 Svelte...

一切都是 Svelte 对象：Board、Square、Piece（Square 内）

一个页面上可以有多个板，
因为没有 shadowDOM，应用我的 CSS 方法：

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

但我想知道是否有一种更（反应性）的 Svelte 方式来创建它？

4

1 回答 1

0

我（现在）得到的是在（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>

但这仅适用于 Svelte REPL

其中样式是<style>文档中的元素，而不是bundle.css中的规则

于 2019-12-05T01:41:55.053 回答