將DOM元素附加到本地dom不適用樣式

Question

在我的Polymer（v1.2.3）元素中，我需要動態地將新創建的DOM元素附加到某些本地DOM節點。我追加的元素包含class="foo"，其中foo類的樣式在我的聚合物元素範圍內。

我面臨的問題是這些樣式不適用於元素。

下面的代碼將舉例說明這個問題：

attached: function() { 
    var el = document.createElement("span"); 
    el.textContent = "Woof. Woof. Meow!"; 
    el.classList.add("foo"); 

    Polymer.dom(this.root).querySelector(".bar").appendChild(el); 
    } 

這裏是我的模板：

<dom-module id="my-element"> 
<template> 

<style> 
    .foo { 
     color: red; 
    } 
</style> 
<div class="bar"></div> 
<div class="baz"><span class="foo">I am not added dynamically!</span></div> 

</template> 
... 
</dom-module> 

在上面的模板，在元素中.baz.foo將應用樣式，但，元素.foo在.bar內不會（聚合物的類別style-scope不適用於它）。

一些額外的信息：

• style-scope沒有添加到動態創建的元素。
• Polymer.dom(this.root).appendChild(el)適用造型，但不會將其添加到所需位置。
• 添加元素後顯式調用updateStyles()或Polymer.dom.flush()不能解決問題。
• 聚合物版1.2.2也包含此問題

Answer 1

有一個open bug，需要追加:host:: content作爲前綴，以各具風格。