必须每次导入才能在svelte组件中使用CSS
我正在开发一个使用Laravel + Svelte + materializecss的产品。
我使用Svelte组件作为自定义标记，使用svelte: options。
示例：<svelte: options tag = "custom-tag" />
如果试图在此组件中加载materializecss，则必须每次在组件中运行import。父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>回答 1
Stack Overflow用户
发布于 2020-10-21 07:02:37
当使用自定义元素时，元素本身将在称为"Shadow DOM“的东西中呈现，这是在页面中呈现的DOM的一部分，但实际上并不是页面本身整个dom结构的一部分，这意味着您不能在这个Shadow DOM之外使用JavaScript来操作Shadow DOM中的单个元素。这是双向的:阴影内部的代码不能影响外部元素，除非通过它的公共接口。
了解更多关于MDN -使用阴影DOM的细节(不像我上面描述的那样黑白)
这个也适用于，您的全局样式规则停止在Shadow的边框，并且不应用于阴影内部的任何东西。这就是为什么您需要在元素本身中导入物化css。
Svelte文档说明了这一点：
样式是封装的，而不仅仅是限定作用域。这意味着任何非组件样式(如global.css文件中的非组件样式)都不适用于自定义元素，包括具有:global(.)的样式。改性剂。 样式不是作为单独的.css文件提取出来的，而是以JavaScript字符串的形式内联到组件中。
根据导入的CSS是如何编写的，它可能意味着或者可能并不意味着许多css被添加到元素中(不确定它是否可以树)，从而使组件更轻巧，您可能需要选择较大css导入的部分，或者至少只提取需要的部分。
https://stackoverflow.com/questions/64455856
复制相似问题
腾讯云开发者
