在自定义元素中使用<paper-material>元素

Question

我正在使用Polymer Starter工具包,我正在创建一个嵌套的自定义元素.我有一个外部元素,可以多次"输出"内部元素.

我的问题是内部元素(business-card)包含一个<paper-material>.此元素不受全局样式的影响.我知道Polymer scoped-style为元素添加了一类,确保它只能影响本地DOM.scoped-style在Dev Tools中删除类会应用全局样式.

如何将标准样式应用于<paper-element>嵌套元素,或者在自定义元素中包含相同样式.

编辑

我的问题似乎是'app-theme'中的样式不适用于内部元素.如果我复制<paper-element>样式(包括媒体查询),并且按照@Zikes的答案,我可以获得理想的结果.

当元素已经完美时,似乎与聚合物的模块化特性相反,从元素复制所有东西.我错过了什么吗？

企业card.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">

<dom-module id="business-card">

  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <content></content>
    </paper-material>
  </template>

</dom-module>

<script>
(function() {
  Polymer({
    is: 'business-card'
  });
})();
</script>

任何帮助非常感谢

Answer 1

Polymer 保护元素内部不受文档样式的影响，反之亦然。这是CSS 范围，也是 Web 组件的一个突出功能。

在简单的示例中这似乎是有问题的，但是组件样式不会互相冲突，并且文档样式不会无意中弄乱组件，这通常对组件重用非常有利。

Polymer Starter Kit 的设置并不适合app-theme.html在其他范围内使用，但您可以做的一件事是将要使用的样式规则复制到 CSS 文件中，然后将该 CSS 文件导入到元素代码中，如下所示。导入和样式得到有效使用（例如，导入仅加载一次，即使您在多个元素中使用它）。

<dom-module id="business-card">

  <link rel="import" type="css" href="theme-styles.css">

  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <content></content>
    </paper-material>
  </template>

  <script>
    Polymer({
      is: 'business-card'
    });
  </script>

</dom-module>

实例： http: //jsbin.com/hojajo/edit?html ,output