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

【问题标题】：Appending DOM element to local dom does not apply styles将 DOM 元素附加到本地 dom 不会应用样式
【发布时间】：2015-11-29 06:09:52
【问题描述】：

在我的 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 将应用样式，但 .bar 中的元素 .foo 不会（聚合物的类 style-scope 没有应用于它）。

一些附加信息：

style-scope 未添加到动态创建的元素中。
Polymer.dom(this.root).appendChild(el) 应用样式，但不会将其添加到所需位置。
在添加元素后显式调用updateStyles() 或Polymer.dom.flush() 并不能解决问题。
Polymer 版本1.2.2 也包含此问题

【问题讨论】：

标签： javascript polymer polymer-1.0 web-component

【解决方案1】：

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

【讨论】：