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

Question

在我的Polymer（ v1.2.3 ）元素中，我需要將新創建的DOM元素動態附加到某些本地DOM節點。 我要附加的元素包含一個class="foo" ，其中foo類具有在我的polymer元素內定義的樣式。

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

以下代碼將舉例說明問題：

  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將應用樣式，但.bar元素.foo將不會應用style-scope （不應用聚合物的類style-scope ）。

一些其他信息：

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

Answer 1

有一個公開的錯誤 ，需要在每個樣式的后面附加:host:: content作為前綴。