Question

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

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

如何将标准<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组件的一个突出特点。

在简单的示例中，它似乎有问题，但它通常非常有利于组件重用，组件样式不会互相攻击，并且文档样式不会无意中污染组件。

在其他范围内使用app-theme.html时，没有理想的设置Polymer Starter Kit，但您可以做的一件事是将要使用的样式规则复制到CSS文件中，然后将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

在自定义元素

2 个答案: