是否有任何特定于 Chrome 的技术来范围/隔离 CSS？答案

【问题标题】：Are there any Chrome-specific techniques to scope/isolate CSS?是否有任何特定于 Chrome 的技术来范围/隔离 CSS？
【发布时间】：2015-08-25 09:13:28
【问题描述】：

我正在编写一个将 HTML 注入显示页面的 Chrome 扩展程序。我希望注入的 HTML 具有自己的样式，不受主机页面中可能存在的 CSS 的影响。

我尝试过使用传统的 CSS，但仍然受到来自主机页面的样式损坏的困扰。

在观看了 I/O 15 的 Polymer 演示后，我想知道是否有任何新的、特定于 Chrome 的技术可以用来实现这一目标？

【问题讨论】：

有关 ShadowDOM 样式的更多信息，请参阅此相关问题：stackoverflow.com/questions/27622605/…

标签： css google-chrome google-chrome-extension polymer shadow-dom

【解决方案1】：

您要查看的是shadow-dom。这将使您能够创建一个小部件/组件（这将是您注入的 html）。这意味着小部件/组件的 DOM 树已被封装，页面中的任何外部样式都不会影响它。 html5rocks 上有一篇很好的文章涵盖了这一点。您可能还想查看WebComponents。请记住，此功能仅在最新的浏览器版本中可用。

【讨论】：

酷。这就是我一直在寻找的。我可以确认“现在外部样式”应该改为“没有外部样式”吗？
是否需要任何命令行标志或非默认设置才能工作？
这是一个错字，我已更正。没有外部样式会影响它。您无需更改 Chrome 中的任何设置即可使用。如果你使用 Polymer，shadow dom 默认是关闭的。你可以阅读这个here

【解决方案2】：

我目前在工作场所使用的两件事是：

我在工作中使用 react，因此 react-css-modules，但 css-modules 应该适用于您的情况。它不是 Chrome 特有的，但我们在我们构建的每个组件的上下文中使用它们。基本上，就像文档状态一样，row 的类会变成类似于table__row___2w27N 的东西。构建名称的细分是 CSS 的文件名，而不是类名，后跟 5 个字符的 base64 哈希。我希望这会有所帮助。

一个潜在的缺点是需要 Webpack。

这是我们组件文件夹结构的示例：

- component
  - Component.jsx/js
  - component.css/scss/sass
  - component.test.js

【讨论】：

也刚刚找到这个，css-modulesify。
我看不出这是一个完整的解决方案。您可以使您的类名唯一，但假设主机页面为基本标签设置样式，即只是简单的div。您需要将它与所有注入的 DOM 的非常彻底的 CSS 重置结合起来。
是的，我不认为这可能是一个没有工作的完整解决方案。使用 Sass/Scss，我认为通过将整个注入的 HTML 包装在一个类中，然后在那里更改元素默认值，管理起来会容易得多。就像你说的那样，@Xan 你需要彻底重置 CSS。