JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<label for="image-1">A1</label>

<test-wc  id="image-1">
  <div>
    <input  type="file">
  </div>
</test-wc>

JavaScript

customElements.define(
	'test-wc',
  class TestWc extends HTMLElement {}
);

customElements.whenDefined('test-wc').then(() => {
  console.log('element defined');
  const container = document.querySelector('test-wc');
  const id = container.getAttribute('id');
  console.log(id);
  container.setAttribute('id', '');
  console.log(container.shadowRoot);
  const input = container.querySelector('input');
  console.log(input)
  input.setAttribute('id', id);
  console.log(  
  	input.getAttribute('id') 
  )
  const label = document.querySelector('label');
  label.setAttribute('htmlFor', id);
  label.setAttribute('for', id);
  label.addEventListener('click', () => {
		console.log('label clicked');
  })
}).catch(e => {
console.log(JSON.stringify(e.message))
})