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

Question

我正在使用 Polymer 入门工具包并正在创建一个嵌套的自定义元素。我有一个外部元素 'outputs' 内部元素多次。

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

如何将标准 <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

如果您想将 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

Answer 2

Polymer 保护元素内部免受文档样式的影响，反之亦然。这就是 CSS 作用域，它是 Web 组件的一个显着特征。

在简单的例子中这似乎有问题，但组件样式不会 bash 彼此，并且文档样式不会无意中弄乱组件，这通常对组件重用非常有益。

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

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

Use <paper-material> element within custom element

polymer

polymer-1.0