css - 是否有任何特定于 Chrome 的技术来范围/隔离 CSS?

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

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

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

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

最佳答案

您需要研究的是 shadow-dom。这将使您能够创建一个小部件/组件(这将是您注入(inject)的 html)。这意味着小部件/组件的 DOM 树是封装的,页面的外部样式不会影响它。 html5rocks上有一篇很好的文章覆盖这个。您可能还想查看 WebComponents .请记住,此功能仅在最新版本的浏览器中可用。

关于css - 是否有任何特定于 Chrome 的技术来范围/隔离 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30750902/

相关文章:

javascript - Chrome扩展程序动态添加脚本

php - 我如何修复 PHP 中的 cookie?

javascript - 如何在点击时触发第二个动画

只适用于 Chrome 的 CSS?

css - 替代样式表在 Chrome 中不起作用

google-chrome - Chrome 扩展程序多久自动更新一次?

javascript - 关闭开发模式和 Chrome 打包应用程序 -- "document.write() is not available in the sandbox of packaged apps"

html - photoshop拼接重叠图片,如何用CSS float

html - 100% 图像宽度?

android - 在移动版 Chrome 浏览器中禁用滑动手势