JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<hello-person name="Pikachu"></hello-person>

CSS

hello-person::slotted(span) {
  display: block
}

JavaScript

class HelloPerson extends HTMLElement {
	static get observedAttributes() {
  	return ['name']
  }
  
  attributeChangedCallback(attr, oldVal, newVal) {
  	if (attr === 'name') {
    	this.shadow.querySelector('span').innerHTML = `Hello, ${newVal}`
    }
  }
  
  constructor() {
  	super()
    
    this.shadow = this.attachShadow({ mode: 'open' })
    
    const button = document.createElement('button')
    button.innerHTML = 'Change Name'
    button.addEventListener('click', () => {
    	this.setAttribute('name', window.faker.name.findName())
    })
    
    const name = document.createElement('span')
    
    this.shadow.appendChild(button)
    this.shadow.appendChild(name)
  }
}

customElements.define('hello-person', HelloPerson)