JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<c-parent>
  <c-child></c-child>
</c-parent>

CSS

.parent:focus {
  color: green;
}

.child:focus {
  color: red;
}

JavaScript

class ParentComponent extends HTMLElement {
	constructor() {
		super();

    this.attachShadow({mode: 'open'}).innerHTML = `
      <h1>Parent</h1>
      <slot></slot>
    `;
	}
  
  connectedCallback() { 
		console.log('parent initialize');
    
    console.log(this.querySelectorAll('c-child'));
  }
}

customElements.define('c-parent', ParentComponent);


class ChildComponent extends HTMLElement {
	constructor() {
		super();

    this.attachShadow({mode: 'open'}).innerHTML = `
      <h1>Child</h1>
      <slot></slot>
    `;
	}
  
  connectedCallback() {
  	console.log('child initialize');
  }
}

customElements.define('c-child', ChildComponent);