css - 即使使用全局运算符，也适用于纤细的组件样式

我已经创建了要添加到现有项目中的通用纤细组件。这些组件使用第三方库，这些库使用global操作符来处理某些样式。当我将组件添加到现有项目时，现有项目的样式会受到子组件的影响。

例子：

在上图中，有一个带有的外部元素* { color: green }和一个带有的内部元素* { color: red }。它按预期工作，内部或外部都没有样式泄漏。

但是，如果我使用:global()，则该样式也将应用于父组件。我正在使用执行此操作的 UI 库，因此我无法控制它们对global. 例如，如果我使用库添加材质按钮，则父样式会变得混乱：

我使用了一个简单的示例，实际上可以通过在父组件上重新定义一些 css 样式来解决，但是我有许多组件使用多个第三方组件进行多层嵌套，这些组件试图更改很多全局样式，因此重新定义父组件中的样式将是不切实际的。
有没有办法告诉 svelte 将所有组件样式限定为自身？

ps：在上面的示例图片中，子元素被转换为 web-component。所以global样式不仅在苗条的应用程序中泄漏，甚至在shadow dom之外泄漏

标签： csssvelte