将 DOM 元素附加到本地 dom 不应用样式

Question

在我的 Polymer (v1.2.3) 元素中，我需要将新创建的 DOM 元素动态附加到某些本地 DOM 节点。我追加的元素包含 class="foo"，其中 class 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 将应用样式，但是 .bar 中的元素 .foo 不会（聚合物的 class style-scope 不适用于它）。

一些附加信息：

style-scope 未添加到动态创建的元素。
Polymer.dom(this.root).appendChild(el) 应用样式，但未将其添加到所需位置。
添加元素后显式调用 updateStyles() 或 Polymer.dom.flush() 无法解决问题。
聚合物版本1.2.2也包含这个问题

Answer 1

有一个 open bug 需要为每个样式附加 :host:: content 作为前缀。

将 DOM 元素附加到本地 dom 不应用样式

Appending DOM element to local dom does not apply styles

javascript

web-component

polymer

polymer-1.0