Verbergen Polymerelement

Question

Ich versuche, mehrere Polymerelemente bei einer bestimmten Elementbedingung zu verstecken. Ich bin mir bewusst, dass es mehrere Möglichkeiten gibt. In meinem opinon ist der einfachste Weg, dies zu tun, um eine neue CSS-Klasse

.invisible { 
    display: none; 
} 

und fügen Sie ihn in der Klassenliste der Polymerelemente

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

Das hat aber keinen Einfluss auf die Elemente einzuführen. Die Elemente sind noch sichtbar. Ein Blick in die elment Inspektor zeigt, dass die Klasse hinzugefügt wurde:

class="style-scope parent-elem invisible" 

Wo Eltern-Elem der Name des übergeordneten Elements ist.

Kann mir jemand erklären, warum das Element nicht versteckt wird?

Danke

Mit besten Grüßen, Meisen

Answer 1

Sie easly auf Elemente mit Eltern property manipulieren kann. Versuchen Sie in Ihrem Element properties hinzufügen property

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

dann in Ihrem method manipulieren diese property und in html Komponente gesetzt

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

ps. wenn dies nicht funktionieren können Sie hinzufügen in parent css

[hidden] { 
    display: none; 
} 

manchmal Polymerelemente besondere Mixins benötigen, um ihre CSS anpassen, aber versteckt in der Regel funktioniert :)