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>

在上面的模板中，.foo中的元素.baz会应用样式但.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作为每种样式的前缀。

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

1 个答案: