JSFiddle - React, Tailwind, and code Playground

HTML

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<dom-module id="my-el">
    <template>
        <button on-tap="toggle">Toggle</button>
        <div id="container">
          <template is="dom-if" id="foo" if="[[prop1]]" strip-whitespace>
            <div id="uploadedImage1">
              foo
            </div>
          </template>
        </div>
    </template>

    <script>
        Polymer({
            is: 'my-el',
            properties: {
              prop1: {
              	type: Boolean,
                value: false
              }
            },

            ready: function() {
              this.$.foo.addEventListener('dom-change', function() {
                if (this.prop1) {
                  console.log(this.$$('#uploadedImage1'));
                } else {
                  console.log(null);
                }
              }.bind(this));
            },
            toggle: function() {
              this.prop1 = !this.prop1;
            }
        });
    </script>
</dom-module>

<my-el></my-el>

JavaScript

// only need this when in the main document and on non-Chrome
addEventListener('WebComponentsReady', function() {
   
});