Скрыть полимерный элемент

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" 

Где родитель-элем это имя родительского элемента.

Может ли кто-нибудь объяснить мне, почему элемент не будет скрыт?

Спасибо

С наилучшими пожеланиями, Meisenmann

Answer 1

вы можете Исли манипулировать на ваших элементов с родителем property. Попробуйте в своем элементе properties добавить property

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

затем в вашем method управлять этим property и html компонент установлен

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

пс. если это не будет работать вы можете добавить в parent css

[hidden] { 
    display: none; 
} 

иногда полимерные элементы нуждаются в специальных Примеси, чтобы настроить их CSS, но скрытый, как правило, работает :)