隐藏聚合物元素答案

【问题标题】：Hide Polymer element隐藏聚合物元素
【发布时间】：2017-01-23 07:01:39
【问题描述】：

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

.invisible {
    display: none;
}

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

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

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

class="style-scope parent-elem invisible"

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

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

谢谢

最好的问候，迈森曼

【问题讨论】：

您好，有时，取决于您的元素如何实现以及如何相互交互，这可能是因为新类隐藏在 shadow dom 或 light dom 中。我对一些外部库有类似的问题，在添加类后使用Polymer.dom.flush() 解决了它。

标签： css polymer

【解决方案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，但隐藏通常可以工作 :)

【讨论】：