CODEWITHSUNDEEP
polymer
gervais.b
gervais.b

Reputation: 2347

Decorate elements from <content>

I have a form-el who is just a container who must wrap all childrens inside a div with specific classes. Instead of repeating this div in each form elements I would like to allow the from-el to wrap them. Can I loop over all elements and wrap them inside other html tags ?

// Markup
<form-el>
    <input-el label="name" type="text" />
    <span>This must also be wrapped</span>
</form-el>

// Would produce
<form>
    <div class="form-field">
       <label>name</label>
       <input type="text" name="name" />
    </div>
    <div class="form-field">
       <span>This must also be wrapped</span>
    </div>
</form>
// Where '<div class="form-field">' is produced by 'from-el'

Upvotes: 3

Views: 729

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

One way to achieve this is by template-repeating <content> nodes tailored to your light-dom, like so:

<polymer-element name="form-el">
<template>

  <template repeat="{{wrappers}}">
    <div style="border: 2px solid orange; padding: 2px; margin: 4px">
      <content select="[key='{{}}']">
    </div>
  </template>

</template>
<script>

  Polymer({
    domReady: function() {
      this.updateWrappers();
    },
    updateWrappers: function() {
      this.wrappers = [];
      for (var i=0, n=this.firstChild; n; n=n.nextSibling) {
        if (n.setAttribute) {
          // attach a selectable key to each light-dom node
          n.setAttribute('key', i);
          // specify a <content> with that key
          this.wrappers.push(i++);
        }
      }
    }
  });

</script>
</polymer-element>

http://jsbin.com/mukip/5/edit

Upvotes: 5

Related Questions