JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="https://gist.github.com/anonymous/6abd249423dd9ecca61f/raw/2642774d08e02ba7821ba04427cfdd8dc9b4a674/polymer.min.js"></script>
<element name="x-foo" attributes="bar">
    <template>
        {{bar}}
    </template>
    <script>
        if(this !== window) Polymer.register(this, {
            ready: function(){
                console.log('ready', this.getAttribute('bar'))
            },
            publish:{
                xxx: function(){
                    console.log('yyy')
                }
            }
        })
    </script>
</element>

JavaScript

var foo = document.createElement('x-foo');
foo.setAttribute('bar', 'baz')
document.body.appendChild(foo);

document.addEventListener('WebComponentsReady', function(){
foo.xxx() 
var bug1 = document.createElement('x-foo')
bug1.setAttribute('bar', 'this will not trigger barChanged')
document.body.appendChild(bug1)

var wrapper = document.createElement('span');
    wrapper.innerHTML = '<x-foo bar="sport" id="bug2"></x-foo>';
    var bug2 = wrapper.firstChild;
    document.body.appendChild(bug2);
    console.log(bug2.xxx) //undefined
    console.log(document.querySelector("#bug2").xxx) //undefined
    setTimeout(function(){console.log(bug2.xxx)},100)
})