<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="custom-element">
<template>
<custom-style>
<style is="custom-style" include="iron-flex"></style>
</custom-style>
<div class="layout horizontal wrap">
<dom-repeat items="[[A]]" as="a">
<template>
<div class="layout horizontal">
[[a]]
<dom-repeat items="[[B]]" as="b">
<template>
<div style="border:1px solid red;">
[[b]]
<dom-repeat items="[[C]]" as="c">
<template>
<div>[[c]]</div>
</template>
</dom-repeat>
</div>
</template>
</dom-repeat>
</div>
</template>
</dom-repeat>
</div>
</template>
<script>
class CustomElement extends Polymer.Element {
static get is() {
return 'custom-element';
}
static get properties() {
return {
A: Array,
B: Array,
C: Array
}
}
connectedCallback() {
super.connectedCallback();
this.A = this.getData('a');
this.B = this.getData('b');
this.C = this.getData('c');
}
getData(str) {
let arr = [];
for (let i = 0; i < 10; i++) {
arr.push(str + i);
}
return arr;
}
}
customElements.define(CustomElement.is, CustomElement);
</script>
</dom-module>
<custom-element></custom-element>