Element transclusion

Question

Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template?

I would like to achieve something like following:

<my-header title="My title">
    <my-header-item name="Item 1"></my-header-item>
    <my-header-item name="Item 2"></my-header-item>
</my-header>

which might be expressed:

<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
    <li>Item 1 <!-- given by my-header-item -->
    <li>Item 2
</ul>

I am not sure if this is a task for polymer or if this is a typical way to use polymer. I am asking, because I started to like polymer and I would like to keep idiomatic thinking.

Answer 1

In Shadow DOM land, this is called distribution. To distribute light DOM nodes into the shadow dom, you use <content> insertion points.

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

It's quite literally a way to render nodes from light dom into placeholders in the shadow dom. If you want to do tricky things with the my-header/my-header-item title/name attributes, you can do something like this:

<polymer-element name="my-header">
  <template>
    <ul>
      <template repeat="{{item in items}}">
        <li>{{item.name}}</li>
      </template>
    </ul>
    <content id="c" select="my-header-item"></content>
  </template>
  <script>
   Polymer('my-header', {
     domReady: function() {
       this.items = [].slice.call(this.$.c.getDistributedNodes());
     }
   });
  </script>
</polymer-element>

Demo: http://jsbin.com/hupuwoma/1/edit

I have a more full-fledged tabs demo does this setup over on https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html.

Answer 2

While admittedly I'm also new to polymer - I think I can answer this.

You should be able to substitute the value of an attribute into the template using the double-mustache syntax e.g.

<h1>{{title}}</h1>

See http://www.polymer-project.org/docs/start/creatingelements.html#publishing

In addition to this you can also substitute the content of a tag. For example if instead of using the "name" attribute in your my-header-item tag you instead had something like this...

<my-header-item>Item 1</my-header-item>

then you could substitute "Item 1" like this:

<li><content></content></li>

See http://www.polymer-project.org/platform/shadow-dom.html for this usage