如何防止外部 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

有两种方法可以实现这一点（您甚至可以同时使用这两种方法）。

如果您希望您的样式规则适用于此处，您需要使它们比 "global" 规则更具体：

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

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

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

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

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

How to prevent outside CSS from overriding web component styles

css

polymer

web-component