JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://polymer-project.org/polymer/polymer.min.js"></script>
<element name="x-placeholder" attributes="width height text">
    <template id="x-template-x-placeholder">
       <style>
        @host {
          x-placeholder {
            color: white;
            font-family: Tahoma;
            background-color:black;
            display: inline-block;
            width: {{width}}px;
            height: {{height}}px;
            line-height:{{height}}px;
          }          
        }
        .center {           
           text-align:center;
           width:100%;           
          }
        </style>
        <div on-click="divClicked" data-data="foo" class="center">{{text}}</div>
    </template>
    <script>
        if(this !== window){
        
            Polymer.register(this, {
                divClicked: function(event){
                   var evt = new Event('clicked')
                   evt.data = event.toElement.dataset.data
                   console.log('from inside', event, event.toElement.dataset.data)
                   this.dispatchEvent(evt)
                },
                foo: function(){
                    alert('foo')
                },
                ready: function(){               
                   
                }
            })
         }
        
    </script>
</element>

<x-placeholder id="foobarbaz" text="This is a placeholder" width="400" height="400"></x-placeholder>

JavaScript

onload = function(){
    var element = document.getElementById('foobarbaz')
    element.addEventListener('clicked', function(e){
        console.log('from outside', e.data, e)
        alert('clicked!')
    })    
    // Object #<HTMLUnknownElement> has no method 'foo' 
    //element.foo()
}