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

Question

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

我的问题是内部元素（名片）包含<paper-material>。此元素不受全局样式的影响。我知道 Polymer 向元素添加了一个 scoped-style 类，以确保它只能影响本地 DOM。在 Dev Tools 中删除 scoped-style 类会应用全局样式。

如何将标准 <paper-element> 中的样式应用到我的嵌套元素或在我的自定义元素中包含这些相同的样式。

编辑

看来我的问题是“app-theme”中的样式未应用于内部元素。如果我复制<paper-element> 样式（包括媒体查询）并遵循@Zikes 的答案，我可以获得预期的结果。

当元素已经完美时，复制元素中的所有内容似乎违背了聚合物的模块化特性。我错过了什么吗？

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

Answer 2

如果您想将paper-material 效果直接应用于您的元素，您可以这样做：

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

这是从paper-material 代码本身复制而来的：https://github.com/PolymerElements/paper-material/blob/master/paper-material.html