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

Question

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

我担心我可能会面临(我还没有)的一个问题是，如果我有相互冲突的样式表，我该如何忽略它们并明确地使用我自己的样式表。例如，我正在为我的 gird 布局使用 bootstrap，如果客户端站点的 bootstrap 版本与我的应用程序中的版本不同，我如何确保只有我的样式应用于我的小部件而不破坏客户端站点上的任何样式.这可能吗？

Answer 1

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

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