How to bind a template by reference to a template outside of the element

Question

I am trying to inject a tag into the polymer element I am creating. With this I plan to be able to control areas in the element (in my case i target to be able to pass in a template which then gets stamped out for each element in my model).

So I prepared a small example of what I would like to do:

http://jsbin.com/wofokanafidu/1/edit

This works the way I would need it. However if I stick the tag into a polymer element itself this stops working:

http://jsbin.com/votihiqozusa/1/edit

How can I achieve the effect of the first example in the second case?

Regards and thanks a lot in advance,

http://jsbin.com/wukaloqacedo/1/ This kind of works, but it displays the output for the my-test element again. — user1259201, Aug 31 '14 at 00:06

score 0 · Answer 1 · answered Aug 31 '14 at 09:31

I now found a way to do this for simple cases:

http://jsbin.com/xexusuhovuka/1/edit

This makes use of the <content> insertion point. So I only have to set the model for the template.

While this works nicely it unfortunately does not help me in my planned use case since I want to repeat a template inside of a <table> element there and something like:

<table>
    <table>
        <th>Heading1</th>
        <content></content>
    </table>
</table>

does not work if <content> should contain <tr> tags for example.

So I will keep trying to find a way which would allow to bind me a <template> in the shadowroot to a <template> outside of it. But I am still replying this as potential answer since it might be an alternative for easier situations.

score 0 · Answer 2 · edited May 23 '17 at 12:12

http://jsbin.com/zadejogide/1/edit?html,output

this fiddle works. this does not directly answer your question but it explains what happens.

if you nest "my-element" into antoher element, the Light DOM of that element is hidden in the shadow tree of the outer element (in this case "my-test") which means: the template tag cant find it.

possible solution

you could adopt the template and append it to the shadowRoot of "my-element" (In some way the template recognize the shadowRoot in which it participates but no others) like here Using template defined in light dom inside a Polymer element (dynamic template creation)

or try this one with is="auto-binding".

<polymer-element name="my-element">
    <template>
        <template id="template" is="auto-binding" ref="foo">
            should not get displayed
        </template>
    </template>
    <script>
        Polymer('my-element', {
          domReady: function() {
            var foo = this.querySelector('#foo');

            if(foo){
                this.shadowRoot.appendChild(foo);
            }
          }
        });
    </script>
</polymer-element>

both approaches dont "really" answer your question but they are acceptable workarouns for this situation.

i also tried to set the ref_ property of the template in javascript but without success... and poking on the private members is not really a good practice.

How to bind a template by reference to a template outside of the element

2 Answers2