聚合物样式不影响宿主元素

Question

我有以下简单的 Polymer 1.0 自定义元素：

<dom-module id="my-custom-element">
    <style>
        :host {
            display: block;
        }
        .grow {
          min-height: 100%;
          height: 100%;
        }
    </style>
    <template>
        <content></content>
    </template>
</dom-module>
<script>
(function() {
  Polymer({
    is: 'my-custom-element',

    properties: {
    },
    ready: function () {

       //this doesn't work
       this.classList.add('grow');

       //this works (if uncommented)
       //this.style.height = '100%';
       //this.style.minHeight= '100%';

    }
  });
})();

我正在尝试将 grow css class 添加到主机。出于某种原因，样式只有在我按如下方式单独设置时才会生效：

 this.style.height = '100%';
 this.style.minHeight= '100%';

如果我改为分配 class:

则没有任何影响

 this.classList.add('grow');

这是为什么？

Answer 1

您似乎希望 grow class 具有 :host 特异性？如果是这样，你的 CSS 是错误的。

<style>
    :host {
        display: block;
    }
    :host.grow {
      min-height: 100%;
      height: 100%;
    }
</style>

以上应该有效。

Answer 2

我正在使用 Polymer 1.6.0，我必须使用：

<style>
  :host {
     display: block;
  }
  :host(.grow) {
    min-height: 100%;
    height: 100%;
  }
</style>

聚合物样式不影响宿主元素

Polymer styles not taking affect on host element

javascript

css

polymer

polymer-1.0