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

【问题标题】：Ignoring parent styles when using JS widgets使用 JS 小部件时忽略父样式
【发布时间】：2019-05-01 19:53:33
【问题描述】：

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

我担心我可能会面临的一个问题（我还没有）是，如果我有冲突的样式表，我如何忽略这些并明确使用我自己的。例如，我在网格布局中使用引导程序，如果客户端站点的引导程序版本与我的应用程序中的不同，我如何确保只有我的样式应用于我的小部件而不破坏客户端站点上的任何样式.这甚至可能吗？

【问题讨论】：

您可以用#my-super-duper-app <your selector> { <your style> } 之类的方式包装您的样式，并希望#my-super-duper-app 在整个网络中都是独一无二的。另外，您可以查看shadow DOM
@fen1x 所以我正在为我的自定义样式这样做。你认为这适用于像 bootstrap 这样的外部样式吗？
这确实可以工作，但是你必须将你的小部件中的所有引导样式重写为#my-app .col而不是.col，这就是如果您广泛使用引导程序，则需要大量工作。就个人而言 - 我会编写自己的自定义样式，而不是依赖外部库。
@fen1x 这是计划，但不幸的是，当前的应用程序正在广泛使用引导程序。我可能会尝试沿着你提到的 DOM 路径走下去。谢谢！

【解决方案1】：

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

React 文档包含一个recipe，说明如何将 React 组件包装为自定义元素，因此它呈现到后者的影子根中。

【讨论】：

【解决方案2】：

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

【讨论】：