scope/isolate CSS 是否有任何 Chrome 特定的技术？

Question

我正在编写一个 Chrome 扩展，将 HTML 注入到显示的页面中。我希望注入的 HTML 有自己的风格，不受可能出现在主机页面中的 CSS 的影响。

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

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

Answer 1

您要研究的是 shadow-dom。这将使您能够创建一个 widget/component（这将是您注入的 html）。这意味着 widget/component 的 DOM 树被封装并且页面的外部样式不会影响它。 html5rocks covering this. You may also want to look into WebComponents 上有一篇很好的文章。请记住，此功能仅在最新版本的浏览器中可用。

Answer 2

我目前在工作场所使用的两个东西是：

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

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

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

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

scope/isolate CSS 是否有任何 Chrome 特定的技术？

Are there any Chrome-specific techniques to scope/isolate CSS?

css

google-chrome

google-chrome-extension

shadow-dom

polymer