如何将页面 css 应用于聚合物组件答案

【问题标题】：How to apply page css to a polymer component如何将页面 css 应用于聚合物组件
【发布时间】：2015-04-25 09:40:44
【问题描述】：

我希望我的聚合物组件使用“普通”样式表中的样式。所以我在样式中添加了 shim-shadowdom，在类中添加了 /deep/，如下所示：

<html>
  <head>
    <style shim-shadowdom>
      .mylink /deep/  {color: orange;}
    <style>
  </head>
  <body>
    <my-link></my-link>
  </body>
</html>

然后是组件：

<polymer-element name="my-link">
   <a class="mylink" href="#">xxx</a>
</polymer-element>

但这在 chrome 中也不起作用——链接仍然有它通常的颜色——在 ff 和 ie 中没有——链接在那里是橙色的，但即使没有 /deep/ 或 shim-shadowdom，它们也是橙色的。

问题 - 我在这里做错了什么？

聚合物版本 - 0.5.5。

PS：除了样式，聚合物按预期工作 - 所有组件都显示出来，ajax 发送它的请求等等。

【问题讨论】：

标签： html css polymer

【解决方案1】：

你需要my-link /deep/ .mylink

编辑：另外，用<template> 元素包围<a>。 确保您的元素已导入！

【讨论】：

非常感谢！就是这样！我真的误解了 /deep/ 语法，所以聚合物与我的问题无关。唯一值得补充的是，在页面范围内应用样式“body /deep/ .style {...”可能更方便。
还有一件事 - 在 IE 和 FF 中应用样式的原因是“因为填充 Shadow DOM 的样式行为很困难，Polymer 选择了实用性和性能而不是正确性。例如， polyfill 不会保护 Shadow DOM 元素免受文档级 CSS 的影响。” (polymer-project.org/0.5/docs/polymer/…)
@user656449 没问题！我是来帮忙的。如果您需要我，请询问：D