JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<button>Add</button>
<div id="container">
  <my-element data-name="test name" data-id="test id"></my-element>
</div>

JavaScript

class MyElement extends HTMLElement {
	constructor() {
		super();
    let shadow = this.attachShadow({mode:'open'});
    let wrapper = document.createElement('div');

    let nameContainer = document.createElement('div');
    nameContainer.setAttribute('id', 'name-container');
    if (this.hasAttribute('data-name')) {
    	console.log('has attribute');
    } else {
    	console.log('doesnt have attribute');
    }
    let nameAttr = this.getAttribute('data-name');
    nameContainer.textContent = nameAttr;

    let idContainer = document.createElement('div');
    nameContainer.setAttribute('id', 'id-container');
    let idAttr = this.getAttribute('data-id');
    idContainer.textContent = idAttr;

    shadow.appendChild(wrapper);
    wrapper.appendChild(nameContainer);
    wrapper.appendChild(idContainer);
  }
  
	static get observedAttributes() {
		return ['data-name', 'data-id'];
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
  	console.log('test');
  }
}

customElements.define('my-element', MyElement);

const btn = document.querySelector('button');
btn.addEventListener('click', event => {
	let myEl = document.createElement('my-element');
  myEl.setAttribute('data-name', 'some name');
  myEl.setAttribute('data-id', 'some id');
  
  let cont = document.querySelector('#container');
  cont.appendChild(myEl);
});