隐藏聚合物元素

Question

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

.invisible {
    display: none;
}

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

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

但这对元素没有影响。元素仍然可见。看一下elme​​nt检查员的表示，该课程已被添加：

class="style-scope parent-elem invisible"

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

有人可以解释为什么元素不会被隐藏吗？

谢谢

最诚挚的问候， Meisenmann

Answer 1

您可以使用父property轻松操作元素。尝试使用您的元素properties添加property

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

然后在method操纵此property和html组件集

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

PS。如果这不起作用，您可以添加parent css

[hidden] {
  display: none;
 }

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