Decorate elements from <content>
I have form-el
, which is just a container that needs to wrap all the children inside div
with certain classes. Instead of repeating this div
on every form element, I would like to allow from-el
them to be wrapped. Is it possible to iterate over all elements and wrap them in 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'
+3
source to share
1 answer
One way to achieve this is with knot repetition patterns <content>
adapted to your light, for example:
<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>
+5
source to share