將樣式應用於聚合物中使用InnerHTML插入的元素

Question

我有一些包含元素內容的元素，我想對其進行格式化，唯一有效的方法是更改​​InnerHTML。但是，本地樣式表不適用於更改的內容。如何解決這個問題？下面是用高分子創建的自定義元素的部分代碼：

Polymer({ 
    attached: function() { 
    this.querySelector(".post-body").innerHTML = this.format(this.querySelector(".post-body").innerHTML); 
    }, 
    format: function(text) { 
    return text.replace(/\n(.+)\n/g, "<p>$1</p>"); 
    }, 
}); 

在這個例子中，我得到的格式正確，但我的樣式表的樣式並不適用於它裏面的P元素。無論如何要修復它像重新應用樣式到頁面或其他任何東西？

Answer 1

更新HTML調用this.updateStyles()後。

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Answer 2

st_efan似乎一針見血的曾在另一個線程：https://stackoverflow.com/a/32306440

他的解決方案是使用原生聚合物DOM API來實現這一目標。

我遇到了同樣的問題，因爲您描述的是：我可以獲取我的數據來加蓋印花，但是它永遠不會得到樣式。調用this.updateStyles()沒有解決我的問題，因爲它看起來我用來戳的方法不是在Polymeric方法中應用innerHTML。

在我的例子中我使用了下面的CSS樣式爲：

p { 
    font-weight: bold; 
    color: red; 
} 

在你原來的職位，你都是使用高分子DOM API。但是，對於其他人閱讀，這並不是那麼明顯。數據郵票使用以下按預期：

var html = "<p>This is a test</p>"; 
this.$.myElementId.innerHTML = html; 

但是，使用此方法絕不允許施加到聚合物元件採取的innerHTML效果CSS樣式。 Zikes建議的方法應該在某些情況下工作，但我相信它只適用通過host和mixins設置的自定義屬性。以下在我的測試中不起作用。

var html = "<p>This is a test</p>"; 
this.querySelector("#myElementId").innerHTML = html; 
this.updateStyles(); 

，做最終會在我的測試工作，並似乎很是設置的innerHTML適當的方法解決的辦法是通過Polymer.dom：

var html = "<p>This is a test</p>"; 
Polymer.dom(this.$.myElementId).innerHTML = html; 

在這個最後的例子中，沒有需要撥打this.updateStyles();。