css - 如何真正隔离 Google Chrome 扩展中的样式表？

Question

我编写了一个 Google Chrome 扩展程序，它会弹出一个带有自动完成字段的对话框及其自己的样式，但在某些网站上我的 CSS 完全损坏，看起来不太好。

我知道如何使用 iFrame 隔离样式，但在 Google Chrome 扩展中，无法以这种方式隔离我的 HTML 和 CSS。另一种方法是将我的所有内容包装到一个单独的 div 中，并使用它自己的 id 和该 id 的相对样式，我这样做了，但似乎它在某些具有“硬”标签样式重载或“! CSS 代码中的 important”指令。

所以，我想知道有没有什么方法可以真正以方便的方式隔离我的样式，或者重载每个小的 CSS 属性来修复每个网站的一个或另一个样式问题是我的坏习惯？

顺便说一句:我将 list 设置为加载“document_end”处的所有内容，但我发现它没有应用于每次 DOM 准备好时都会加载的样式表。

Answer 1

在提出问题时，您唯一的选择是使用 iframe 或具有非常高 specificity 的样式表。并显式设置可能影响样式的所有属性。最后一种方法非常麻烦，因为总会有一些属性被你忽略。因此，隔离样式表的唯一可用方法是使用 iframe。

这个问题的解决方案 - 没有 iframe 的样式隔离 - 是 Shadow DOM (since Chrome 25)。您可以在HTML5 Rocks找到教程。对于使用 Shadow DOM 隔离样式的真实 Chrome 扩展，请参阅 Display #Anchors (source code here)。