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

Posted 2023-02-23

【中文标题】如何防止外部 CSS 覆盖 Web 组件样式

【英文标题】：How to prevent outside CSS from overriding web component styles

【发布时间】：2015-03-04 18:18:38

【问题描述】：

我有一个自定义的 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>

提前感谢您的帮助。

【参考方案1】：

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

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

:host * 
    font-size: 12px;

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

:host 
    font-size: 12px!important;

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

【讨论】：

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

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

我认为你是对的。这是对您的理论的确认：groups.google.com/forum/#!topic/polymer-dev/06zYBZ_IMjc

CSS 继承跨越了阴影边界。 resetStyleInheritance 曾经有一个标志，但它已被删除。

嗯，这似乎是 Web 组件方法的真正缺陷。似乎应该有一种说法，这是 Web 组件样式，并且父样式仅应在它们指定特殊内容时应用，例如 !important-polymer-element 或其他东西