javascript - 如何在Svelte中根据`use`指令对其类更改的组件进行样式设置？

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

Form.svelte

<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>

Delayed.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中。

我知道我可以使用全局样式表来解决此问题，但是我很好奇为什么范围样式不适用，以及是否有一种方法可以使它起作用。

这行得通，但感觉很hack。

<style>
  form {
    display: block;
  }

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

最佳答案

Svelte编译器删除未使用的CSS规则，即带有选择器的规则在组件的标记中不匹配。您应该对此有一个编译器警告“未使用的CSS选择器”。而且由于编译器看不到动态添加的类，因此您的form.submitting选择器也已删除。

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

如果您希望样式仅应用于此组件及其子组件的范围，则需要一个包装元素，您可以像下面这样引用：

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

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

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

关于javascript - 如何在Svelte中根据`use`指令对其类更改的组件进行样式设置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59207799/