使用 svelte 5 为 tabulator 6.3 创建自定义元素/Web 组件的正确方法是什么？

Question

尝试创建一个 Web 组件/自定义元素，使用 svelte 从 tabulatorjs 包装表格，但由于某种原因无法使表格正确显示。我已经遵循了文档text，当您运行普通的精简组件时，它似乎可以工作，但作为自定义元素/组件会失败。失败的 Web 组件

VS

工作非 Web 组件

对于代码示例，这里有一个演示存储库，其中包含可以工作的“主”分支和不能工作的“损坏”分支。 另外值得注意的是，计数器 Web 组件在两个分支中都可以工作，但制表器失败。

Answer 1

好吧，首先感谢您设置存储库，它确实有助于解决问题！您的问题是您正在使用 svelte:head 导入 tabulator.min.css 文件，由于 documentation 的解释，该文件不起作用：

样式是封装的，而不仅仅是范围（除非您设置shadow：“none”）。这意味着任何非组件样式（例如 global.css 文件中可能有的样式）都不会应用于自定义元素，包括带有 :global(...) 修饰符的样式

如果你取消它并将其放入样式标签中，你基本上会得到一堆

unused-css-selector

警告，这些警告在你构建时会被清除。因此，解决方案是使用

:global

标签包装每个选择器，以便编译器让所有样式传递到

dist/assets/main.js

，在那里它将使用适当的样式封装表格。你最终会得到 this 怪物，但是在构建时它可以工作，不要忘记添加

<svelte:options customElement="custom-table"/>

到开头（我删除了，因为它混淆了 REPL）。现在，避免包装每个选择器的另一种方法是使用

svelte-preprocess

并简单地打开样式标签，如下所示：

<style global>
/*whole unminified tabulator.min.css*/
</style>

...并将其设置在您的

svelte.config.js

上，这让我想到了最后一点：当我设置项目时，Svelte 一直抱怨在编译器选项中设置

customElement: true

，我看到您在

vite.config.js 中进行了设置

' 精简插件。但 Svelte 停止抱怨的唯一方法是直接在 svelte 配置中设置它，结果如下

//svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess' // optional

export default {
  // moved from vite.config.js
  compilerOptions: {
    customElement: true,
  },
  preprocess: vitePreprocess(), // default preprocess
  preprocess: sveltePreprocess(), // if you want to use Svelte the global style attribute
}

然后你只需构建它，它就可以工作了！