Can I use a Template DOM repeater based on the number of child elements of <contents>

Question

I was contemplating some code which would wrap each child of of the web component. Something like:

<dom-module id=test">
  <template>
    <template is="dom-repeat" items="{{contents.children}}">
      <div>
        {{item}}
      </div>
    </template>
  </template>
</dom-module>

so what would happen is if i did something like:

<test>
  <span>foo</span>
  <span>bar</span>
</test>

it would kick out:

<test>
  <div><span>foo</span></div>
  <div><span>bar</span></div>
</test>

I was looking over ways i could do this, but i am having issues trying to create the dom-repeat correctly since contents.children isnt a real property.

Edit i was looking at what attributes are allowed for content tags, which is select plus all globals.

So in theory, i could assign an ID and then get the children of it?

<content id="myContent"></content>

and then in the dart say:

ContentElement get _content => $['myContent'];
@property HtmlElement children = [];

a.created(): super.created(){
  set("children", _content.children);
}

and then mark the template accordingly?

<template is="dom-repeat" items="{{children}}">
  ...
</template>

Answer 1

It looks like you would like to wrap certain elements and add some new functionality to them.

The simplest (and most Polymer-ish) way to do that, is to introduce another custom element, which is (only) responsible for the wrapping.

Your test element (which, by the way, has an incorrect name - the name must contain a dash) would then look like this:

<dom-module id=test-element">
  <template>
    <content></content>
  </template>
</dom-module>

(I fixed the naming according to convention. Renamed from test to test-element .)

And the newly created wrapper element (named wrapper-element ) should look something like this:

<dom-module id=wrapper-element">
  <template>
    <div><content></content></div>
  </template>
</dom-module>

Everything put together, the usage would be something like this:

<test-element>
  <wrapper-element><span>foo</span></wrapper-element>
  <wrapper-element><span>bar</span></wrapper-element>
</test-element>

With this, you get a clean solution, where you don't even need any JS code for the wrapping logic.