templating-demo.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="templating-demo">
  <script>
    /**
     * `templating-demo`
     * Test examples
     *
     * @customElement
     * @polymer
     * @demo demo/templating-demo.html
     */
    class TemplatingDemo extends Polymer.Element {
        static get is() { return 'templating-demo'; }
        static get properties() {
            return {
                hiddenProperty: Boolean,
                showProperty: Boolean,
                products: Array,
            };
        }

        static get template() {
            return Polymer.html`
                <style>
                    :host {
                        display: block;
                    }
                </style>
                <template is="dom-if" if="[[!hiddenProperty]]">
                    <p id="noHiddenParagraph">You can see me because !hiddenProperty is [[!hiddenProperty]]</p>
                </template>

                <template is="dom-if" if="[[showProperty]]">
                    <p id="showParagraph">You can see me because showProperty is [[showProperty]]</p>
                </template>

                <template is="dom-if" if="[[products]]">
                    <ul id="products">
                        <template is="dom-repeat" items="[[products]]" as="product">
                            <li>[[product.id]] -> [[product.name]]</li>
                        </template>
                    </ul>
                </template>
            `;
        }
    }

    window.customElements.define(TemplatingDemo.is, TemplatingDemo);
  </script>
</dom-module>