JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div id = 'place'></div>

JavaScript

// https://developers.google.com/web/fundamentals/getting-started/primers/customelements?hl=en#extendhtml

// https://html.spec.whatwg.org/multipage/scripting.html#custom-elements-customized-builtin-example

// Not supported in Chrome as of 3/22/2017
// https://bugs.chromium.org/p/chromium/issues/detail?id=618606

class FancyButton extends HTMLButtonElement {
  connectedCallback() {    
    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight/2}px`;
    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', e => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});
widget = new FancyButton();

document.querySelector('#place').appendChild(widget)