css - 隐藏 polymer 元素

Question

我尝试在特定元素条件下隐藏多个 polymer 元素。我知道有几种可能性。在我看来，最简单的方法是引入一个新的 CSS 类

.invisible {
    display: none;
}

并将其添加到 polymer 元素的类列表中

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

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

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

然后在您的方法中操作此属性并在html组件集中

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

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

[hidden] {
  display: none;
 }

有时 polymer 元素需要特殊的 mixin 来定制它们的 css，但隐藏通常有效:)