我已经创建了通用的苗条组件,我想添加到现有的项目。组件使用第三方库,第三方库使用
global
某些样式的运算符。
将构件添加到现有项目时,现有项目的样式受子构件的影响。
例子:
* { color: green }
还有一个内部元素
* { color: red }
. 它的工作原理和预期一样,没有风格泄露内部或外部。
但是,如果我使用
:global()
,该样式也应用于父零部件。我使用的UI库可以做到这一点,所以我无法控制它们的使用
全球的
. 例如,如果使用库添加材质按钮,则父样式会失控:
我使用了一个简单的例子,实际上可以通过在父组件上重新定义一些css样式来解决这个问题,但是我有许多组件使用多个第三方组件进行多层嵌套,这些组件试图更改许多全局样式,因此在父组件中重新定义样式是不切实际的。
有没有一种方法可以告诉斯维尔特将所有的组件样式都限定在自己的范围内?
ps:在上面的示例图像中,子元素被转换为web组件。所以
全球的
风格不仅在苗条的应用程序中泄露,甚至在影子dom之外泄露
