JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<user-card></user-card>

CSS

.controls {
  margin-bottom: 10px;
}

JavaScript

// create user card class
class UserCard extends HTMLElement {
  constructor() {
    super();

    console.log('constructor()');
  }
  
  static get observedAttributes() {
    return [ 'name', 'some-other-attribute' ];
  }

  connectedCallback() {
    console.log('connectedCallback()');
  }

  disconnectedCallback() {
    console.warn('disconnectedCallback()');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log('attributeChangedCallback()', name, oldValue, newValue);
  }
}

// define user card element
customElements.define('user-card', UserCard);