HTML5聚合物自定義元素樣式與屬性

我試用聚合物和自定義元素。試圖通過傳遞屬性值在元素內部創建一個< h1>某個顏色。所以，我的元素代碼如下所示：HTML5聚合物自定義元素樣式與屬性

<polymer-element name="test-element" attributes="nameColor"> 
    <template> 
    Hello! My name is <span style="color:{{nameColor}}">Robert</span> 
    <h1> oioioi </h1> 

    <style> 
    h1 { 
    color:{{nameColor}}; 
    } 
    </style> 

    </template> 
    <script> 

    Polymer('test-element', { 
     nameColor: "blue" 
    }); 

    </script> 
</polymer-element>

所以，後來我用的元素是這樣的：

<test-element nameColor="red"></test-element>

的事情是，我的名字（羅伯特）現在是紅色。這很好。但是h1元素不是紅色的。爲什麼不？如果我改變顏色：{{nameColor}};在樣式標籤內顏色：紅色;它的工作原理，但我不想那麼做。那麼屬性值不會傳遞給樣式？任何提示爲什麼發生這種情況，我應該在哪裏尋找更多的信息？我讀過一些博客，但沒有找到關於此的任何具體信息。

謝謝。 :-)

來源

2014-07-03 r0ber7

當你可以結合style屬性，你不能綁定到<style>標籤，因爲CSS勻場對非本地ShadowDOM有效。

這還是試驗性的，但看看core-style。

來源

2014-07-03 22:36:34

謝謝！那是我正在尋找的信息。奇怪的是，這個元素似乎是這樣做的：https：//github.com/viniciusalmeida/ninja-presentation/blob/gh-pages/src/ninja-presentation。HTML我無法讓它正常工作，這是我首先遇到的。猜猜我會分叉它。有一個鏈接到演示，但似乎工作，所以這有點怪異... – r0ber7

我在Chrome中測試了你的代碼，它能正常工作，但不幸的是它不支持FireFox和Safari！

來源

2014-07-03 21:18:43

是的，我知道。要測試代碼，您需要使用Polymer和platform.js，以防舊瀏覽器或本機不支持polyfills的應用程序。沒有這個代碼，這個代碼將不會工作。 – r0ber7

我把你的代碼放在JSBin上，看它是如何工作的。它看起來像是將CSS放到了Firefox的頁面頭部，因爲我使用的版本（OSX上的VM中的24 - >窗口）不支持陰影支持，因此失敗。

在OSX上的Chrome 35上，它保留了陰影和封裝樣式。

作爲一個變通嘗試以下

<h1 id="h1"> oioioi </h1> 

Polymer('test-element', { 
    nameColor: "blue", 
    ready : function() { 
    if (this.nameColor !== '') { 
     this.$.h1.style.color = this.nameColor; 
    } 
    } 
});

我知道，是一樣的做這個

<h1 style="color:{{nameColor}}"> oioioi </h1>

來源

2014-07-03 22:05:08 tim

您可以更改：

<span style="color:{{nameColor}}">Robert</span>

到

<span style$="color:{{nameColor}};">Robert</span>

，並刪除它形成塊，它應該工作。

//編輯

你可能有改變：

Polymer('test-element', { 
    nameColor: "blue" 
});

到：

Polymer('test-element', { 
    properties:{ 
    nameColor: { 
     type: String, 
     value: "blue" 
    } 
    } 
});

來源

2017-03-30 08:29:21

HTML5聚合物自定義元素樣式與屬性

回答

相關問題