JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

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

JavaScript

// Widget API exploration using CustomElement - 2

class MyWidget extends HTMLElement {

  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(object, value) {  	
  	object.label = value
  } 
}

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

var widget = new MyWidget()
document.querySelector('#place').appendChild(widget)
//works but less than ideal API
widget.api.setLabel(widget, 'foo')