InnerHTML of my custom polymer tag overrides everything in <template> -

i don't know how tell custom element render inner html of custom tag, i.e:

<link rel="import" href="../bower_components/polymer/polymer.html">  <polymer-element name="my-element" noscript>   <template>     <span>hello <b>my-element</b>. shadow dom.</span>   </template> </polymer-element>  <my-element>hi!</my-element> 

renders:

hi!

i want able tell component , how use whatever put between custom element's tags.

to bring in elements outside (light dom) , render them inside shadow dom, need define insertion points using <content> tag:

<polymer-element name="my-element" noscript>   <template>     <span>hello <b>my-element</b>. shadow dom.</span>     <content></content>   </template> </polymer-element> 

demo: http://jsbin.com/najiquzivofu/1/edit

you can select specific children using select attr:

<polymer-element name="my-element2" noscript>   <template>     <span>hello <b>my-element</b>. shadow dom.</span>     <content select="p"></content>   </template> </polymer-element>  <my-element2>   <div>this won't render</div>   <p>this because insertion point invites in shadow dom</p> </my-element2> 

see http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees , http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-distributed-nodes more.