使用JS小部件时忽略父样式

时间:2019-05-01 19:53:34

标签: css reactjs webpack

我正在使用React创建可添加到外部客户端站点的js小部件。我的捆绑程序(webpack)为我的应用创建了js文件,其中包含构建中的所有样式和资产。

我担心我可能会面临的一个问题(至今尚未解决)是,如果我的样式表冲突,那么如何忽略这些样式表并显式使用自己的样式表。例如,我正在使用引导程序进行网格布局,如果客户端站点的引导程序版本与应用程序中的引导程序版本不同,如何确保仅将样式应用于我的小部件而不会破坏客户端站点上的任何样式。这有可能吗?

2 个答案:

答案 0 :(得分:0)

这就是Shadow DOM的用途(如@ fen1x already mentioned)。如果将组件渲染到影子根中,则父样式将不会被继承。

React文档包含recipe,说明如何将React组件包装为自定义元素,以便将其渲染到后者的影子根中。

答案 1 :(得分:0)

Shadow dom 不会避免继承父样式。 Shadow dom 使得主 dom 上使用的 css 选择器不可能干扰来自 shadow dom 的选择器。

请参阅:Shadow Dom inheriting parent page CSS [Chrome] 了解更多信息