1

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>

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)

st_efan
  • 90
  • 7

2 Answers2

1

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>';
st_efan
  • 90
  • 7
0

How about of binding data?

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

Flavio Ochoa
  • 961
  • 7
  • 20
  • h2 is just an example. I would have to bind HTML, but then its not recognized as HTML anymore. The webcomponent is intended to do sth like [dillinger.io](http://dillinger.io/). I would like to style arbitrary, dynamically created HTML. – st_efan Aug 27 '15 at 06:46