将DOM元素附加到本地dom不会应用样式-Java 学习之路

在我的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 未应用于它） .

Some additional info:

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

1 回答

0

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

回复于 2024-04-20T04:00:26+08:00

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

1 回答

相关问题