苗条的动态 html 元素没有应用 css

Question

我有一个 svelte 组件，它使用一个库来显示 JSON 树，但该库需要一个 html 钩子来加载。之后，它使用自己的类和 ID 生成自己的 html 结构。到目前为止一切顺利，但是如果我在组件中为将来生成的选择器添加一些样式，则不会应用该样式。

这是问题吗？有什么解决办法吗？

这是我的代码示例：

<script>
  import { onMount } from "svelte";
  import { Content } from "@smui/card";
  import { copyToClipboard } from "../../public/js/utils";

  export let data;
  let contentBody;

  onMount(() => {

    const editor = new JSONEditor(
      contentBody,
      { mode: "view", navigationBar: false },
      data
    );

    const editorMenu = document.getElementsByClassName("jsoneditor-menu")[0];
    const copy = document.createElement("img");
    copy.src = "../../public/img/copy.png";
    copy.setAttribute("class", "custom-button");
    editorMenu.append(copy);

    copy.onclick = () => copyToClipboard(editor.getText()));
  });
</script>

<style>
  .jsoneditor-menu {
    background-color: #525b69;
    border: 1px solid #e8e8e8;
  }

  .jsoneditor {
    border: 1px solid #e8e8e8;
  }

  .json {
    height: 555px;
  }

 .custom-button {
    width: 20px;
    height: 20px;
    margin: 2px;
    padding: 2px;
    border-radius: 2px;
    border: 1px solid transparent;
    color: #fff;
    opacity: 0.8;
    font-family: arial, sans-serif;
    font-size: 10pt;
    float: left;
  }

</style>

<Content>
  <div class="json" bind:this={contentBody} />
</Content>

注意：该样式仅适用于根元素json类

Answer 1

是的，您已正确识别问题。解决方案是使用:global魔术伪选择器 ( docs )使您的样式成为全局样式。

<style>
  /* this will not be removed, and not scoped to the component */
  :global(.foo) { ... }

  /* this will not be removed, but still scoped to divs inside _this_ component */
  div :global(.bar) { ... }
</style>

Svelte 中的 CSS 范围是通过在您创作的 CSS 选择器中添加一个唯一的类来实现的。例如，如果您编写.foo，编译器会将其转换为.svelte-a3bmb2.foo.

为此，编译器还需要将此类添加到与选择器匹配的所有元素中.foo。它可以对它在标记中看到的元素执行此操作。但是对于在运行时动态创建的元素，它不能这样做。

这就是为什么（我猜）Svelte 删除了与组件标记中的任何内容都不匹配的 CSS 规则。编译器在执行此操作时通常会发出警告，例如“未使用的 CSS 选择器”。

如果您将样式设为全局，则编译器不再需要限定它们的范围，因此问题解决了。