使用JS小部件时忽略父样式
使用JS小部件时忽略父样式
提问于 2019-05-02 03:53:34
我正在使用react创建可以添加到外部客户端站点的js小部件。我的捆绑器(webpack)创建我的应用程序的js文件，其中包括构建中的所有样式和资产。
我担心我可能会面临的一个问题(我还没有)是，如果我有冲突的样式表，我如何忽略它们并显式地使用我自己的。例如，我正在为我的网格布局使用bootstrap，如果客户端站点的bootstrap版本与我的应用程序中的版本不同，我如何确保只将我的样式应用于我的小部件，而不中断客户端站点上的任何样式。这有可能吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-02 06:49:28
这就是Shadow DOM的用途(如@fen1x already mentioned)。如果您将组件呈现到阴影根中，则不会继承父样式。
React文档包含一个关于如何将React组件包装为自定义元素的recipe，因此它呈现到后者的阴影根中。
Stack Overflow用户
发布于 2021-01-09 07:07:59
阴影dom不会避免继承父样式。卷影dom使得在主dom上使用的css选择器不可能干扰来自卷影dom的选择器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55941914
复制相关文章
相似问题
腾讯云开发者
