css - 样式不适用于聚合物网络组件中的动态内容

Question

我在这里重新创建了一个 h2 元素:

<link rel="import" href="../../js/lib/polymer/polymer.html">
    <dom-module id="x-custom">
    <style>
        h2 { color: green; }
    </style>
    <template>
        <div id="content">
            <h2>TEST</h2>
        </div>
    </template>

    <script>
    (function() {
        Polymer({
            is: 'x-custom',
            ready: function() {
                this.$.content.innerHTML = '<h2>TEST 2</h2>';
                this.updateStyles();
            }
        });
    })();
    </script>
</dom-module>

如果我跳过就绪函数“TEST”是绿色的，而不是“TEST 2”。认为 updateStyles() 可能会解决这个问题，但没有。任何想法为什么这不起作用？ (聚合物 1.0， Chrome 44)

Answer 1

您不能像往常一样使用 innerHTML，您需要使用 Polymers 自己的 DOM API 来执行此操作。这有效:

Polymer.dom(this.$.content).innerHTML = '<h2>TEST 2</h2>';