如何设置其类根据 Svelte 中的“use”指令而更改的组件的样式？

Question

我正在创建一个指令来调整它所应用的元素的类。但是，当类更改时，该类的样式不适用。例如：

纤细的形状

<form id='sign-in' use:delayed={ handleSubmit }>
  <label for='sign-in-name'>Your Name</label>
  <input required id='sign-in-name' type='text' />

  <input type='submit' value='Sign In' />
</form>

<style>
  form {
    display: block;
  }

  form.submitting {
    display: none;
  }
</style>

延迟.js

export default function(node, action) {
  node.addEventListener('submit', async function(event) {
    event.preventDefault()
    const originalClass = node.className

    node.className = `${ originalClass } submitting`
    await action()
    node.className = originalClass
  })
}

在这种情况下，类将在 DOM 中成功更改，但表单仍将显示。该form.submitting样式甚至没有进入 Svelte 生成的 CSS 中。

我知道我可以使用全局样式表来解决这个问题，但我很好奇为什么作用域样式不适用，以及是否有办法让它以这种方式工作。

这可行，但感觉很hacky。

<style>
  form {
    display: block;
  }

  :global(form.submitting) {
    display: none;
  }
</style>

Answer 1

Svelte 编译器删除未使用的 CSS 规则，即具有与组件标记不匹配的选择器的规则。你应该有一个编译器警告“未使用的 CSS 选择器”。由于编译器无法看到动态添加的类，因此您的form.submitting选择器将被删除。

解决方案确实是让你的动态选择器:global(...)。

如果您希望样式仅适用于该组件及其子组件的范围，则需要一个可以引用的包装元素，如下所示：

<div>
  <form>...</form>
</div>

<style>
  div :global(form.submitting) { ... }
</style>

Svelte 会将div选择器部分的范围限定为当前组件，这实际上意味着该:global(...)部分仅适用于<div>该组件内的表单。