样式不适用于聚合物纤网组件中的动态内容 [英] style not applied to dynamic content in polymer web-component

问题描述

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

I recreate an h2-element here:

<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)

If I skip the ready-function "TEST" is green, but not "TEST 2". Thought updateStyles() may fix this, but didn't. Any ideas why this doesn't work? (Polymer 1.0, Chrome 44)

推荐答案

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

You can't use innerHTML as usual, you need to do this with Polymers own DOM API. This works:

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

这篇关于样式不适用于聚合物纤网组件中的动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！