隐藏聚合物元素

Question

我试图在某一元素条件下隐藏几个聚合物元素。我知道有几种可能性。在我的opinon中，最简单的方法是引入一个新的CSS类

.invisible {
    display: none;
}

并将其添加到聚合物元素的类列表中

this.$.icon.classList.add('invisible');
this.$.text.classList.add('invisible');
this.$.button.classList.add('invisible');

但这对元素没有影响。元素仍然可见。对elment检查器的查看显示，添加了该类：

class="style-scope parent-elem invisible"

其中parent-elem是父元素的名称。

谁能解释一下为什么元素不会被隐藏？

谢谢。

问候你，梅森曼

Answer 1

您可以使用parent属性轻松地操作您的元素。尝试在元素属性添加属性

properties: {
 ...
 elementsVisible: {
  type: Boolean,
  value: true
 }
 ...
}

然后在方法中操作此属性和HTML组件集

<element hidden="[[!elementsVisible]]" ></element>

如果这不起作用，可以在父CSS中添加

[hidden] {
  display: none;
 }

有时聚合物元素需要特殊的mixins来定制它们的css，但hidden通常有效：）