JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<my-toast></my-toast>

JavaScript

/* class Toast extends HTMLElement {
  
  static get observedAttributes () { return ['content'] }
  
  constructor () { super(); }
  connectedCallback () {
    console.log('connected');
    this.innerHTML = `<div class="content"></div>`;
  }
  attributeChangedCallback (attribute) {
    console.log('attribute changed ', attribute, this.getAttribute(attribute));
    this.querySelector('.content').innerHTML = this.getAttribute(attribute);
  }
} */


class Toast extends HTMLElement {

  // static get observedAttributes () {
  //   return ['content'];
  // }

  // observedAttributes = ['content'];
  static get observedAttributes () { return ['content'] }

	constructor () { super(); }

  connectedCallback () {
    this.innerHTML = `<div class="content"></div>`;
  }

  attributeChangedCallback (attribute) {
  	console.log('att change');
    this.querySelector('.content').innerHTML = this.getAttribute(attribute);
  }

}

customElements.define('my-toast', Toast);

setTimeout(() => {
	document.querySelector('my-toast').setAttribute('content', '<div>Is html <b>Hrm</b></div>');
}, 3000);