如何防止外部CSS覆盖Web组件样式

Question

我有一个自定义的Polymer元素，我想以某种特定的方式对其进行样式设置，并将其作为插件提供给许多不同的网站。我希望能够以一种封装自定义组件样式的方式来使它们在所有嵌入的网站上看起来都一样。下面是一个示例，显示了来自父Web页面的字体指令如何干扰我的组件样式：

<style>
* {
  font-size: 18px;
}
</style>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      :host {
        font-size: 12px;
      }
    </style>
    <div>
      Please tell me how to make this 12pt.
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<polymer-css-test></polymer-css-test>

Thanks in advance for your help.

- cayblood

Answer 1

有两种方法可以实现这个目标（甚至可以同时使用两种方法）。

如果你想要在这里应用你的样式规则，你需要使它们比“全局”的规则更加具体：

:host * {
    font-size: 12px;
}

另外，您可以在规则中添加!important标记，使其覆盖其他规则，但是这应该谨慎使用：

:host {
    font-size: 12px!important;
}

如果您想了解关于特异性的更多信息（即哪些规则适用于哪些元素），请查看此页面。

- Timo D

---

谢谢@timo-d。我有点困惑，因为Shadow DOM应该防止外部CSS干扰我的组件样式。请参考这篇文章：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ 你熟悉Web组件吗？ - cayblood

阴影DOM在DOM和CSS样式方面确实是自己的空间，而且确实不能直接对Shadow DOM中的元素应用CSS样式，除非使用::shadow或/deep/。但是，有一些CSS属性（如font-size）可以从父级继承，即使样式规则不适用于子元素本身。我认为这就是这里发生的事情。我承认这很奇怪，我找不到任何来源来证实我的理论。 - Timo D

我认为你是正确的。这里是你的理论的确认：https://groups.google.com/forum/#!topic/polymer-dev/06zYBZ_IMjc - cayblood

CSS继承会跨越阴影边界。以前有一个“resetStyleInheritance”的标志，但已被删除。 - Scott Miles

嗯，这似乎是 Web 组件方法中的一个真正缺陷。看起来应该有一种方法来表明这是 Web 组件样式，并且只有在它们指定某些特殊内容时才应用父级样式，例如 !important-polymer-element 或其他类似方式。 - chrismarx