JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/download/polymer-cdn/1.0.0/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.0.0/lib/polymer/polymer.html">


<!-- test element -->
<dom-module is="test-elem">

    <script>
        TestElem = Polymer({
            is: "test-elem",

            properties: {
                prop1: { type: String, value: "original value", notify: true }
            },

            factoryImpl: function() {
                var that = this;

                setTimeout(function(){
                    that.prop1 = "new value";
                }, 2000);
            }

        });
    </script>

</dom-module>



        
<!-- Main page -->
<template is="dom-bind" id="main-page">

    <span>{{test.prop1}}</span>

</template>

<script>
    var scope = document.getElementById('main-page');

    var t = new TestElem();
    
    t.addEventListener('prop1-changed', function(e){
            scope.notifyPath('test.prop1', e.currentTarget.prop1)
        });

    scope.test = t;
</script>