JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

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

JavaScript

// Widget API exploration using CustomElement - 4

class MyWidget extends HTMLElement{

	constructor() {
   super()
   this.api.setLabel = this.api.setLabel.bind(this)  
  } 

	connectedCallback() {
  	console.log('in dom')
  	this.innerHTML = '<div> My name is <span></span>'
  }
  
	set label(value){
  	console.log(value)
  	var spanElt = this.querySelector('span')
    spanElt.textContent = value
  }
  
}

MyWidget.prototype.api  = {
	setLabel: function(value) {  	
  	this.label = value
  } 
}


window.customElements.define('my-widget', MyWidget)

var widget = new MyWidget()
document.querySelector('#place').appendChild(widget)
widget.api.setLabel('foo')