隱藏聚合物元素

我試圖在特定元素條件下隱藏幾種聚合物元素。我知道有幾種可能性。在我的opinon做到這一點，最簡單的方法是引入一個新的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是父元素的名稱。

任何人都可以解釋爲什麼元素不會被隱藏嗎？

謝謝

最好的問候， Meisenmann

2017-01-23 Meisenmann

嗨，有時候，這取決於如何您的元素來實現和互動彼此之間，這可能是因爲新課程隱藏在陰影中，或者是光明的dom。我有一個類似的問題與一些外部庫和使用'Polymer.dom.flush（）'後添加類解決了它。 – Arfost

你可以伊斯利操縱與父property你的元素。試着在你的元素properties添加property

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

然後在method操縱這個property和html組件設置

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

PS。如果這不會工作，你可以添加在parent css

[hidden] { 
    display: none; 
}

有時聚合物元素需要特殊的混入，以定製自己的CSS，但隱藏的通常工作:)

2017-01-23 07:26:04 Kejt

謝謝你的指點。如果主機元素的某些屬性的文本長度<0，則隱藏元素。因此，我必須爲每個文本屬性創建一個附加標誌。在上面的解決方案中，我可以在觀察者中添加CSS類而不需要額外的屬性。 – Meisenmann

在你的示例代碼中，你已經寫了三個元素添加類，如果你只需要一個標記來隱藏所有這些樹元素，我會建議你使用Polymer屬性標誌 - 你可以很容易地控制它（比類更好） – Kejt

不幸的是我需要一個每個組件的不同標誌。爲什麼隱藏類對元素沒有影響？ – Meisenmann

回答