JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<template id="commentTemplate">
    <div>
        <img src="" />
        <div class="comment-text"></div>
    </div>
</template>

<template id="tick-tock-clock-template">
  <span id="hh"></span>
  <span id="sep">:</span>
  <span id="mm"></span>
</template>

<tick-tock-clock id="t"></tick-tock-clock><br>
<cuckoo-clock></cuckoo-clock>

CSS

tick-tock-clock:unresolved:after {
    content: '??:??'
}

JavaScript

function addComment(imageUrl, text) {
  var t = document.querySelector("#commentTemplate");
  var comment = t.content.cloneNode(true);
  // Populate content.
  comment.querySelector('img').src = imageUrl;
  comment.querySelector('.comment-text').textContent = text;
  document.body.appendChild(comment);
}
console.log('here');
addComment('http://google.com/logo1.png', 'logo');
addComment('http://google.com/logo1.png', 'logo2');

function go() {

var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() {
    // Create a ShadowRoot, making this element a shadow host.
    this._root = this.createShadowRoot();
    var template = document.querySelector('#tick-tock-clock-template');
    this._root.appendChild(document.importNode(template.content));
};
p.attachedCallback = function() {
    this.tick();
    this._interval = window.setInterval(this.tick.bind(this), 1000);
};
p.detachedCallback = function() {
    window.clearInterval(this._interval);
};
p.tick = function () {
    function fmt(n) {
        return (n < 10 ? '0' : '') + n;
    }

    var now = new Date();
    this._root.querySelector('#hh').textContent = fmt(now.getHours());
    this._root.querySelector('#sep').style.visibility =
        now.getSeconds() % 2 ? 'visible' : 'hidden';
    this._root.querySelector('#mm').textContent = fmt(now.getMinutes());
};
p.chime = function () {
    console.log('chime');
}
var TickTockClock = document.registerElement('tick-tock-clock',
                                             {prototype: p});

document.body.appendChild(new TickTockClock);
document.body.appendChild(document.createElement('tick-tock-clock'));

    
p = Object.create(TickTockClock.prototype);
p.popOutBirdie = function() {
    console.log('popOutBirdie');
}
p.chime = function() {
  this.popOutBirdie();
  TickTockClock.prototype.chime.call(this);
};
var CuckooClock = document.registerElement('cuckoo-clock', {prototype: p});
var c = new CuckooClock();
c.tick();         // inherited from...