Question

我正在尝试设计我的孩子组件。将样式放在父组件中是错误的吗？它似乎不起作用。

我将.card-page的样式放在顶级元素中（包含我使用它的expenses-module）

<dom-module id="expenses-app">
  <template>
    <style>
    ...
    .card-page {
      display: block;
      width: 100%;
    }
    </style>

    <app-drawer-layout>
      <app-header-layout>
        ...

        <iron-pages selected="{{routeData.view}}" attr-for-selected="name">
          <dashboard-module name="dashboard" route="{{subroute}}"></dashboard-module>
          <expenses-module name="expenses" route="{{subroute}}"></expenses-module>
          <settings-module name="settings" route="{{subroute}}"></settings-module>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>

在费用模块中，

<paper-card heading="Expenses" class="card-page">...
</paper-card>

似乎我将样式移动到expenses-module它是否有效。

Answer 1

您无法直接在其父级中为自定义元素内的元素设置样式，因为Polymer会在<dom-module>中处理该样式，并且仅将样式应用于直接子成员。它不会下降到子自定义元素。

换句话说，标准CSS选择器只能在声明组件的范围内工作。在Shadow和Shady DOM中都有。

要使样式使用嵌套元素，您应该使用CSS mixins and properties。所有PolymerElements和许多第三方元素都将带有这样的样式扩展点。命名通常遵循惯例，其中主要mixin被称为与元素本身相同。此外，可能有更具体的mixins和属性，它们只设置元素的一部分。例如<paper-card> docs列出了--paper-card mixin，--paper-card-content mixin，--paper-card-header-color等等。

如果您想更好地控制所使用元素的样式，您可能希望创建自己的CSS mixins / properties，并将@apply()它们创建为所选元素。请参阅以下示例中的--my-elem-card-page仅适用于两张纸卡中的一张。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/> 
  <link href="paper-card/paper-card.html" rel="import"/>
</head>

<body>
  <my-wrapper></my-wrapper>
  
  <dom-module id="my-elem">
    <template>
      <style>
        .card-page {
          @apply(--my-elem-card-page);
        }
      </style>
      
      <paper-card heading="my-elem specific style" class="card-page">
        <div class="card-content">
          Content here
        </div>
      </paper-card>
      <paper-card heading="Default style" class="unstyled-page">
        <div class="card-content">
          Content here
        </div>
      </paper-card>
    </template>
  </dom-module>
  
  <dom-module id="my-wrapper">
    <template>
      <style>
        # will be ignored
        paper-card {
          width: 200px;
        }
        
        my-elem{
          --paper-card: {
            color: blue;
            display: block;
          }
        }
        
        my-elem {
          --my-elem-card-page: {
              color: red;
          }
        }
      </style>
      
      <my-elem></my-elem>
    </template>
  </dom-module>
  
  <script>
    Polymer({
      is: 'my-elem'
    });

    Polymer({
      is: 'my-wrapper'
    });
  </script>

</body>
</html>

＆＃13;

聚合物样式儿童组件

1 个答案: