Polymer dynamically added elements not styled -

here cut down version of element have:

<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 styles                 (this.domhost || polymer).updatestyles();             }         });     </script> </dom-module> 

which used adding following index.html page:

<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 styles          (this.domhost || polymer).updatestyles();        }      });    </script>  </dom-module>    <my-element>text goes here</my-element>

plunker here

i can see span element created have class dark applied none of styles dark class being applied. must because being dynamically added child. have tried called updatestyles function on both this , global polymer object no avail.

how make sure styles applied correctly?

the reason using <content> tag instead of attribute purely simplicity.

dom api

polymer provides custom api manipulating dom such local dom , light dom trees maintained.

note: dom manipulation must use api, opposed dom api directly on nodes.

         polymer.dom(containerel).appendchild(clippedspan);