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

【问题标题】：style not applied to dynamic content in polymer web-component样式不适用于聚合物网络组件中的动态内容
【发布时间】：2015-11-20 18:10:33
【问题描述】：

我在这里重新创建了一个 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，铬 44）

【问题讨论】：

标签： css polymer-1.0 shadow-dom

【解决方案1】：

你不能像往常一样使用 innerHTML，你需要使用 Polymers 自己的 DOM API 来做到这一点。这有效：

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

【讨论】：

【解决方案2】：

绑定数据呢？

<dom-module id="x-custom">
<style>
    h2 { color: green; }
</style>
<template>
    <div id="content">
        <h2>{{test}}</h2><!-- this will be in green color -->
    </div>
</template>

<script>
(function() {
    Polymer({
        is: 'x-custom',
         properties:{
          test:{
            type:String,
            value:"test 1"
          },
         },
        ready: function() {
          this.test = "test 2"
        }
    });
})();
</script>

【讨论】：

h2 只是一个例子。我将不得不绑定 HTML，但它不再被识别为 HTML。 webcomponent 旨在做某事，例如dillinger.io。我想为任意、动态创建的 HTML 设置样式。