如何在 Svelte 自定义元素中引入外部 CSS？

javascript

2024-03-02 12:36:12

Svelte 自定义元素中引入外部 CSS 的终极指南

在 Svelte 的世界里，创建一个自定义元素并使其具有时尚感可能是一项艰巨的任务，尤其是当这些时尚感依赖于外部 CSS 时。如果你正在为这个问题苦苦挣扎，不要担心，我们为你提供了详细的指南，将帮助你克服这一挑战。

什么是 Svelte？

对于那些不熟悉的人来说，Svelte 是一个编译器，用于构建 Web 应用程序。它以其轻量级、可读性和出色的性能而闻名。Svelte 的一个关键功能是自定义元素的能力，它允许你创建自己的带有独特行为和外观的可重用组件。

问题：引入外部 CSS

在创建自定义元素时，你可能需要引入外部 CSS，例如来自字体图标库的样式表。然而，当构建组件并尝试使用它时，外部样式可能不会被应用。这是因为 Svelte 默认使用 Shadow DOM，它封装了自定义元素的样式。

解决方案：使用 Shadow DOM 和 CSS 选项

为了克服这个障碍，你需要启用 Shadow DOM 并为你的组件添加 CSS 选项。这样做的方法如下：

启用 Shadow DOM： 使用 svelte:options 组件并将其 shadowDom 属性设置为 true。
添加 CSS 选项： 在你的 svelte.config.js 文件中，在 compilerOptions 对象中启用 customElement 和 css 选项。

其他方法：

除了使用 Shadow DOM 外，还有其他方法可以引入外部 CSS：

内联 CSS： 将样式直接写入你的组件的 <style> 标签中。
CSS 预处理： 使用 CSS 预处理工具，如 Sass 或 Less，并将预处理的样式表导入你的组件。
第三方模块： 使用第三方模块，如 svelte-css-loader，将外部 CSS 注入到你的构建中。

完整示例

以下是使用 Shadow DOM 和 CSS 选项引入外部 CSS 的示例：

<svelte:options tag="my-custom-element" shadowDom></svelte:options>

<link href="./../node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

<div id="my-app-container">
  <i class="fas fa-thumbs-{approved ? 'up' : 'down'}"></i>
</div>