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

Question

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

<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>

在此先感谢您的帮助。

Answer 1

有两种方法可以实现此目的（您甚至可以同时使用两种方法）。

如果您希望样式规则应用于此处，则需要使它们比“全局”规则更具体：

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

此外，您可以将!important令牌添加到规则中以使其覆盖其他规则，但应谨慎使用：

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

有关特异性（哪些规则适用于哪些元素）的更多信息，请查看此页面。