聚合物样式儿童组件

Question

I am trying to style my child components. 我正在尝试设计我的孩子组件。 Isit wrong to put the style in a parent component? 将样式放在父组件中是错误的吗？ It appears that does not work. 它似乎不起作用。

I put the style for .card-page in the top level element (containing expenses-module where I use it) 我将.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>

In expenses module, 在费用模块中，

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

Seems like if I move the styles into expenses-module it works. 似乎如果我将样式移动到expenses-module它是否有效。

Answer 1

You cannot directly style elements inside custom element from their parents like that, because Polymer processes the style within <dom-module> and will apply styles only to direct child members. 您无法直接在其父元素中定制自定义元素内的元素，因为Polymer会在<dom-module>处理该样式，并且仅将样式应用于直接子成员。 It will not descend into child custom elements. 它不会下降到子自定义元素。

In other words, standard CSS selectors will only work within the scope of the declaring component. 换句话说，标准CSS选择器只能在声明组件的范围内工作。 Both in Shadow and Shady DOM. Shadow和Shady DOM都有。

For your styles to work with nested elements, you should use CSS mixins and properties . 要使您的样式使用嵌套元素，您应该使用CSS mixins和属性。 All PolymerElements and many 3rd party elements will come with such styling extension points. 所有PolymerElements和许多第三方元素都将带有这样的样式扩展点。 The naming usually follow the convention, where the main mixin is called same as the element itself. 命名通常遵循惯例，其中主要mixin被称为与元素本身相同。 Additionally, there may be more specific mixins and properties, which style only parts of the element. 此外，可能有更具体的mixins和属性，它们只设置元素的一部分。 <paper-card> docs for example lists --paper-card mixin, --paper-card-content mixin, --paper-card-header-color and more. <paper-card> docs例如列表 - --paper-card mixin， - --paper-card-content mixin，-- --paper-card-header-color等等。

If you want to better control the styling of elements you use, you would want to create your own CSS mixins/properties and @apply() them to selected elements. 如果你想更好地控制你使用的元素的样式，你可能想要创建自己的CSS mixins / properties和@apply()它们到选定的元素。 See how in the example below --my-elem-card-page applies only to one of the two paper cards. 请参阅下面的示例--my-elem-card-page仅适用于两张纸卡中的一张。

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

聚合物样式儿童组件

问题描述

1 个解决方案

解决方案1
4 2016-08-21 16:58:39

聚合物样式儿童组件

问题描述

1 个解决方案

解决方案1 4 2016-08-21 16:58:39

解决方案1
4 2016-08-21 16:58:39