動態結合在Polymer「必要」屬性不影響風格

我使用的形式紙輸入的聚合物元件和它的「必要」動態屬性變化的，像這樣：動態結合在Polymer「必要」屬性不影響風格

<paper-input required$="[[isRequired]]" label="Required attr. bound"></paper-input>

對於所需的輸入，我定義稍有不同的風格，使他們網頁上更加明顯，就像這樣：

paper-input[required] { 
    --paper-input-container-label: { 
     color: green; 
    } 
    ; 
    --paper-input-container-label-floating: { 
     font-weight: bold; 
     color: green; 
    } 
    ; 
    --paper-input-container-underline: { 
     border-bottom: 2px solid green; 
    } 
    }

屬性是「必需的」屬性設置正確，行爲與預期中的形式，但問題是，元件結合的作品以及在某種意義上在設置屬性時沒有正確設置樣式。

在另一方面，設置「必要」的屬性時不結合，風格是正確的應用：以同樣的方式

<paper-input required label="Required set directly"></paper-input>

動態綁定做了「禁用」屬性按預期工作。爲了更好地理解，我創建的jsfiddle來說明問題：

https://jsfiddle.net/dstefanox/h6xz9usn/3/

我也試過在必要方式改變的屬性，但結果都是一樣的 - 風格不會改變。任何想法如何解決這個問題？

來源

2017-06-27 dstefanox

在您的CSS中，您正在使用Polymer的自定義屬性填充。例如：--paper-input-container-label 不幸的是，當屬性更改時，不會自動重新評估這些自定義CSS屬性。以下是documentation在此主題上所說的內容：

聚合物的自定義屬性填充程序會在元素創建時評估和應用自定義屬性值。爲了讓元素（及其子樹）重新評估由於動態更改（如應用CSS類等）而導致的自定義屬性值，請在元素上調用updateStyles方法。要更新頁面上的所有元素，您還可以致電Polymer.updateStyles。

所以基本上你需要手動觀看的isRequired變化，並呼籲任何this.updateStyles你的元素或Polymer.updateStyles上。

來源

2017-06-28 07:21:52 Maria

動態結合在Polymer「必要」屬性不影響風格

回答

相關問題