<meta name="description" content="Core-list demo">

<script src="http://www.polymer-project.org/0.5/webcomponents.min.js"></script>

​

<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

​

<polymer-element name="my-element">

    <template>

       <div id="container">

        <template if="{{show}}">

            <div>I'm showing.</div>

            <div id="elementWithUnexposedInternals"></div>

         </template>

      </div>

      <button on-click="{{toggleShow}}">Show/Hide</button>

    </template>

    <script>

        Polymer({

            show: false,

            showChanged: function(){

              this.async(function() {

                this.$.container.querySelector("#elementWithUnexposedInternals").textContent = "Foo!";

              });

            },

            toggleShow: function() {

              this.show = !this.show;

            }

        });

    </script>

</polymer-element>

<my-element></my-element>

​