每次都必须导入才能在 svelte 组件中使用 CSS

Question

我正在使用 Laravel + Svelte + materializecss 开发产品。

我使用 Svelte 组件作为自定义标签使用 svelte: options。
示例：<svelte: options tag = "custom-tag" />

如果您尝试在此组件中加载 materializecss，每次在组件中都必须运行导入。父级 HTML 调用 materializecss。

这是为什么？如果你能告诉我，我将不胜感激。

index.blade.php

<html>
<head>
    <!-- ↓ materializecss included -->
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <custom-tag />
<script src="js/app.js"></script>
</body>
</html>

CustomTag.svelte

<svelte:options tag="custon-tag"/>

<style>
    /* Why is this essential? */
    @import 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css';
</style>


<p>This is test.</p>

Answer 1

使用自定义元素时，元素本身将呈现在称为“阴影 DOM”的东西中，这是在您的页面中呈现的一块 dom，但实际上并不是页面本身的整个 DOM 结构的一部分，这意味着例如您不能使用此 Shadow DOM 外部的 JavaScript 来操作 Shadow DOM 内部的单个元素。顺便说一下，这是双向的：Shadow 内部的代码不能影响它外部的元素，除非通过它的 public 接口。

在 MDN - Using shadow DOM 上阅读更多详细信息（它不像我上面描述的那样黑白分明）

这个也适用于CSS，你的全局样式规则停止在阴影的边界DOM并且没有应用到任何东西在阴影中。这就是为什么您需要在元素本身中导入具体化 css。

Svelte 文档是这样说的：

Styles are encapsulated, rather than merely scoped. This means that any non-component styles (such as you might have in a global.css file) will not apply to the custom element, including styles with the :global(...) modifier.

Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string

取决于导入的CSS是如何写的，它可能会也可能不会意味着很多它被添加到你的元素中（不确定它是否是treeshake-able）来制作你的组件较轻，您可能需要 cherry-pick 较大 css 的部分导入或至少只提取您需要的那些部分。

每次都必须导入才能在 svelte 组件中使用 CSS

Must import each time to use CSS in svelte components

laravel

svelte