Svelte组件样式作用域不生效问题求助

大家好！我最近在Svelte项目里加样式的时候碰到了个头疼的问题，想请各位大佬帮忙看看。

事情是这样的：我用了Flowbite Svelte的<Button>组件，一开始我把<style>标签写在组件的div里面，结果整个应用里所有的button元素都变成红色了——这明显是全局生效了，虽然效果出来了但完全不符合我要的组件隔离需求。

当时的代码是这样的：

<script>
    import { Button } from "flowbite-svelte";
</script>

<div>
    <Button>Test Button</Button>

    <style>
        button {
            background-color: red;
        }
    </style>
</div>

后来我翻了Svelte的文档，说把<style>标签放在组件的HTML元素外面，就能让样式只作用在当前组件里。于是我改成了下面的代码：

<script>
    import { Button } from "flowbite-svelte";
</script>

<div>
    <Button>Test Button</Button>
</div>

<style>
    button {
        background-color: red;
    }
</style>

结果更糟了——这次我的Test Button完全没变红，样式根本没生效！我明明按照文档来的，怎么就不行呢？

有没有大佬能帮我解释下原因，再给个可行的解决办法呀？

问题原因&解决方案 #

我后来梳理了下关键节点，终于搞清楚问题出在哪了：

• Svelte的作用域样式是通过自动给当前组件的DOM元素添加唯一的data属性实现的，样式只会匹配带这个属性的元素。
• 但我们用的<Button>是外部引入的子组件，它内部的button标签属于子组件的DOM结构，不在当前组件的作用域范围内，所以当前组件的作用域样式默认不会渗透进去。

给你几个实用的解决思路：

思路一：配合当前组件选择器使用:global()伪类

用当前组件的根容器选择器包裹:global()，这样既能穿透到子组件的button元素，又不会不小心污染全局样式：

<script>
    import { Button } from "flowbite-svelte";
</script>

<div class="local-button-wrapper">
    <Button>Test Button</Button>
</div>

<style>
    .local-button-wrapper :global(button) {
        background-color: red;
    }
</style>

思路二：给外部组件传自定义类名（推荐）

如果Flowbite的Button组件支持传入自定义class属性（大部分UI组件库都支持），直接给Button加个自定义类，然后在样式里定义这个类的样式就行——这种方式最符合组件封装的设计思路：

<script>
    import { Button } from "flowbite-svelte";
</script>

<div>
    <Button class="custom-red-btn">Test Button</Button>
</div>

<style>
    .custom-red-btn {
        background-color: red;
    }
</style>

思路三：用Svelte的::deep()穿透选择器

Svelte支持::deep()伪类来打破作用域限制，让样式渗透到子组件内部，写法也很简单：

<script>
    import { Button } from "flowbite-svelte";
</script>

<div>
    <Button>Test Button</Button>
</div>

<style>
    div ::deep(button) {
        background-color: red;
    }
</style>

不过要注意，::deep()在一些场景下可能会有兼容性问题，优先用前两种方案会更稳妥。

备注：内容来源于stack exchange，提问作者sampa