JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"></script>
<flash-message class="flash flash--alert">
  <a href="#" class="close alert-close">×</a>
  Welcome
</flash-message>

Babel + JSX

const FlashMessage = {
  attachedCallback() {
    this._flashMsg = this;
    this._closeBtn = this._flashMsg.querySelector('.alert-close');

    this._closeBtn.addEventListener('click', this._hide.bind(this), false);
    this._closeBtn.addEventListener('touchstart', this._hide.bind(this), false);
    setTimeout(this._hide.bind(this), 3000);
  },

  detachedCallback() {
    this._closeBtn.removeEventListener('click', this._hide.bind(this), false);
    this._closeBtn.removeEventListener('touchstart', this._hide.bind(this), false);
  },

  _hide(e) {
    this._flashMsg.classList.add('hidden');
  },
};

const FlashMessagePrototype = Object.create(window.HTMLElement.prototype);
Object.keys(FlashMessage).forEach(prop => {
  FlashMessagePrototype[prop] = FlashMessage[prop];
});

window.FlashMessageElement = document.registerElement('flash-message', {
  prototype: FlashMessagePrototype
});