JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

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

JavaScript

// Widget API exploration using CustomElement - 1

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
  }

}

// Uncaught TypeError: Illegal invocation
MyWidget.prototype.api = {
 	set label(value) {  	
  	MyWidget.prototype.label = value
  }
}



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

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