Polymer 使用<；纸张材料>；自定义元素中的元素

我正在玩聚合物初学者工具包，正在创建一个嵌套的自定义元素。我有一个外部元素可以多次“输出”内部元素

我的问题是，内部元素（名片）包含

。此元素不受全局样式的影响。我知道Polymer在元素中添加了一类

作用域样式

，确保它只能影响本地DOM。删除Dev Tools中的

范围样式

类将应用全局样式

如何将标准

中的样式应用于嵌套元素或在自定义元素中包含这些相同的样式

编辑

我的问题似乎是“应用程序主题”中的样式未应用于内部元素。如果我复制

样式，包括媒体查询，并遵循@Zikes的答案，我就可以得到想要的结果

当一个元素已经是完美的时候，从一个元素复制所有的东西似乎与聚合物的模块化性质背道而驰。我错过什么了吗

名片.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>

：主持人{
显示：块；
}
（功能（）{
聚合物({
是：“名片”
});
})();

---

非常感谢您的任何帮助

如果您想将

纸质材质

效果直接应用于您的元素，您可以这样做：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">

<dom-module id="business-card">
  <style>
    :host {
      display: block;
      position: relative;
      @apply(--shadow-transition);
    }
    :host([elevation="1"]) {
      @apply(--shadow-elevation-2dp);
    }
    :host([elevation="2"]) {
      @apply(--shadow-elevation-4dp);
    }
    :host([elevation="3"]) {
      @apply(--shadow-elevation-6dp);
    }
    :host([elevation="4"]) {
      @apply(--shadow-elevation-8dp);
    }
    :host([elevation="5"]) {
      @apply(--shadow-elevation-16dp);
    }
  </style>
  <template>
    <content></content>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'business-card',
    properties: {
      /**
       * The z-depth of this element, from 0-5. Setting to 0 will remove the
       * shadow, and each increasing number greater than 0 will be "deeper"
       * than the last.
       *
       * @attribute elevation
       * @type number
       * @default 1
       */
      elevation: {
        type: Number,
        reflectToAttribute: true,
        value: 1
      },
      /**
       * Set this to true to animate the shadow when setting a new
       * `elevation` value.
       *
       * @attribute animated
       * @type boolean
       * @default false
       */
      animated: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      }
    }
  });
</script>

：主持人{
显示：块；
位置：相对位置；
@应用（--阴影过渡）；
}
：主机（[elevation=“1”]）{
@应用（--shadow-elevation-2dp）；
}
：主机（[elevation=“2”]）{
@应用（--shadow-elevation-4dp）；
}
：主机（[elevation=“3”]）{
@应用（--shadow-elevation-6dp）；
}
：主机（[elevation=“4”]）{
@应用（--shadow-elevation-8dp）；
}
：主机（[elevation=“5”]）{
@应用（--shadow-elevation-16dp）；
}
聚合物({
是‘名片’，
特性：{
/**
*此元素的z深度，从0-5。设置为0将删除
*阴影，并且每增加一个大于0的数字将“更深”
*比上一次好。
*
*@属性高程
*@类型编号
*@default 1
*/
标高：{
类型：数字，
reflectToAttribute:true，
价值：1
},
/**
*将此设置为true，以在设置新阴影时设置阴影动画
*`elevation`值。
*
*@attribute动画
*@type布尔值
*@default false
*/
动画：{
类型：布尔型，
reflectToAttribute:true，
值：false
}
}
});

---

这是从

纸张材料

代码本身复制的：

聚合物保护元件内部不受文档样式的影响，反之亦然。这是CSS范围，也是Web组件的一个突出特性

在简单的示例中可能会出现问题，但组件样式不会相互碰撞，文档样式不会无意中损坏组件，这通常对组件重用非常有益

Polymer Starter Kit并不适合在其他范围内使用

app-theme.html

，但您可以做的一件事是将要使用的样式规则复制到CSS文件中，然后将该CSS文件导入到元素代码中，如下所示。有效地使用导入和样式（例如，导入仅加载一次，即使在多个元素中使用）

：主持人{
显示：块；
}
聚合物({
是：“名片”
});

---

实例：

我做了更改，但在浏览器中有相同的效果。问题似乎是，inner没有像我预期的那样受到应用程序主题的影响。我将很快更新这个问题。我也遇到了这个问题。纸质材质在index.html中工作良好，但如果在元素中使用，样式会下降。奇怪的是，elevation属性仍然有效，只是css被删除了。我希望导入元素的html文件（聚合物和纸张材料）可以工作，但似乎不行。

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