Polymer 1.0 test for nested templates

by gabriela b

HTML

<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="parent-element">
    <template>
        <p>I'm <b>parent-element</b>.</p>
        <template is="dom-if" if="{{showContent}}">
            <content></content>             
        </template>
    </template>
</dom-module>
<dom-module id="child-element">
    <template> <span>I'm <b>child-element</b>.</span> 
        <br/>Inside child template
        <br/>
        <content></content>
    </template>
</dom-module>
<parent-element>
    <child-element></child-element>
</parent-element>
<p>
    <button class="show-content-btn">Show Contenht</button>
    <button class="hide-content-btn">Hide Contenht</button>
</p>

CSS

parent-element {
    border: 1px solid blue;
    margin: 5px;
    display: block;
}
child-element {
    border: 1px solid red;
    margin: 5px;
    display: block;
}

JavaScript

var $showContentBtn = $('.show-content-btn');
var $hideContentBtn = $('.hide-content-btn');

var parentElement = $('parent-element')[0];
var childElement = $('child-element')[0];

$showContentBtn.on('click', function () {
    parentElement.showContent = true;
});

$hideContentBtn.on('click', function () {
    parentElement.showContent = false;
});

Polymer({
    is: "parent-element",
    properties: {
        showContent: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
        }
    },
    ready: function () {
        //...
    }
});

Polymer({
    is: "child-element",
    ready: function () {
        //...
    }
});