JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<my-first-component>Slotted Content</my-first-component>

JavaScript

class MyFirstComponent extends HTMLElement {
	constructor () {
  	super();
    this.shadow = this.attachShadow({ mode: 'open'});
  }
  
  connectedCallback () {
  	this.shadow.innerHTML = `<slot></slot>`
    const range = document.createRange();
    const beforeFragment = range.createContextualFragment(`
    	<div>Before</div>
    `);
    const afterFragment = range.createContextualFragment(`
    	<div>After</div>
    `);
    this.insertBefore(beforeFragment, this.firstChild);
    this.append(afterFragment);
  }
}

customElements.define('my-first-component', MyFirstComponent);