動態改變聚合物2.0中的風格

我在寫一個概念證明Polymer 2.0 web組件，我想根據用戶輸入更改一段文本的顏色。動態改變聚合物2.0中的風格

我試過使用Polymer 2.0的this.updateStyles（{...}）和Polymer.updateStyles（{...}），但都沒有更新輸出的文本。

例如

Polymer.updateStyles({'--tool-colour': 'green'});

我已經寫了一個plunker，它演示了問題here。

我可能錯過了一些簡單的東西，有人可以幫我嗎？

來源

2017-06-29 Ben Smith

如果你打開控制檯，你會看到幾個404錯誤的shadycss組件。我猜這與它有關。 –

不錯的地方。可能是因爲我剛剛添加到Polymer網站上的基本Plunker示例中，導致問題得以解決。我將不得不在本地環境中嘗試這個例子，在這個環境中，bower會希望確保依賴被加載（這與Plunker中的情況不同，正如你指出的那樣）。我會嘗試更新這個答案。 –

由於Jordan Running評論，問題是由於缺少依賴關係。我在一個在線編輯器（Plunker）編寫代碼，假設我需要的所有聚合物工作都是對'webcomponents-loader.js'的引用，並且鏈接到我的定製組件使用的其他Web組件（doh！）。

爲了讓我的聚合物元件工作，我使用了Polymer團隊提供的Polymer CLI工具（特別是我使用this創建了Polymer元素模板項目）。

當我再使用：

polymer serve

要運行一個本地網絡服務器爲「serve」，這是用我的聚合物元件的應用，依賴則得到妥善解決和元素的工作。

來源

2017-07-04 13:26:40

我做這樣的自己：

<template> 
    <style> 
     .green-icon { 
      color: var(--green-color); 
     } 
     .red-icon { 
      color: var(--red-color); 
     } 
    </style> 
    <my-element class$="[[computeIconColor(boolProp)]]"></my-element> 
</template>

然後在腳本：

computeIconColor(boolProp) { 
    if (!!boolProp) return 'green-icon'; 
    return 'red-icon'; 
}

來源

2017-06-29 19:20:59 codeMonkey

本例使用Polymer 1.0框架，而不是2.0。 –

這不是聚合物2.0嗎？ – codeMonkey

我的錯誤codeMonkey，使用美元語法在聚合物2中是有效的。雖然這工作，我仍然想要updateStyles方法工作。 –

「問題」是喬丹跑步指出，您的webcomponentsjs沒有加載。

真實情況是，如果沒有webcomponentsjs，就不能使用updateStyles，這很不幸，因爲有些情況下您可能根本不需要它。

在這種情況下，你可以做 this.setAttribute('style', '--tool-colour: red'); 但是，然後再次這將無法在需要webcomponentsjs的瀏覽器中工作。

我最終做了什麼創建了一個使用setAttributes（合併樣式）或updateStyles取決於可用的行爲。它的代碼看起來像這樣。

if (!window.ShadyCSS || (window.ShadyCSS && window.ShadyCSS.nativeCss === true)) { 
    var newStyleString = ''; 
    for (var key in newStyle) { 
     if (newStyle.hasOwnProperty(key)) { 
      newStyleString += key + ': ' + newStyle[key] + ';'; 
     } 
    } 
    this.setAttribute('style', newStyleString); 
} else { 
    ShadyCSS.styleSubtree(this, newStyle); 
}

因此，對於使用我只是寫this.updateStyles({'--tool-colour': 'green'});爲我的行爲將覆蓋updateStyles。

您可以在這裏找到的完整代碼 https://github.com/daKmoR/grain-update-inline-style-behavior。這更多一點，因爲它也增加了對IE11的內聯樣式的支持。

來源

2017-07-03 20:26:02 daKmoR

雖然這個工作，我想逐字使用Polymer 2.0庫，而不必使用諸如使用setAttribute這樣的技巧。儘管如此，這仍然是一個很好的方法。 –

動態改變聚合物2.0中的風格

回答

相關問題