聚合物动态添加的元素未设置样式

Question

这是我拥有的元素的简化版本：

<dom-module id="my-element">
    <template>
        <style>
            :host {
                display: inline;
            }

            .dark {
                background: black;
                color: white;
            }
        </style>

        <span id="container">
            <content></content>
        </span>
    </template>
    <script>
        Polymer({
            is: 'my-element',
            ready: function () {
                var containerEl = this.$.container;
                var containerText  = containerEl.textContent.trim();

                // create element
                var clippedSpan = document.createElement('span');
                clippedSpan.textContent = containerText;
                clippedSpan.classList.add("dark");

                // clear container
                containerEl.innerHTML = '';

                containerEl.appendChild(clippedSpan);

                // update the styles
                (this.domHost || Polymer).updateStyles();
            }
        });
    </script>
</dom-module>

通过将以下内容添加到 index.html 页面来使用：

<my-element>text goes here</my-element>

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: inline;
      }
      .dark {
        background: black;
        color: white;
      }
    </style>

    <span id="container">
       <content></content>
     </span>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      ready: function() {
        var containerEl = this.$.container;
        var containerText = containerEl.textContent.trim();

        // create element
        var clippedSpan = document.createElement('span');
        clippedSpan.textContent = containerText;
        clippedSpan.classList.add("dark");

        // clear container
        containerEl.innerHTML = '';

        containerEl.appendChild(clippedSpan);

        // update the styles
        (this.domHost || Polymer).updateStyles();
      }
    });
  </script>
</dom-module>

<my-element>text goes here</my-element>

Plunker here

我可以看到创建的 span 元素确实应用了 class dark 但是 none dark class 实际上正在被应用。这一定是因为它被动态添加为 child。我已经尝试在 this 和全局 Polymer object 上调用 updateStyles 函数但无济于事。

如何确保正确应用样式？

使用 <content> 标签而不是属性纯粹是为了简单起见。

Answer 1

DOM API

Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained.

Note: All DOM manipulation must use this API, as opposed to DOM API directly on nodes.

         Polymer.dom(containerEl).appendChild(clippedSpan);

聚合物动态添加的元素未设置样式

Polymer dynamically added elements not styled

polymer

polymer-1.0