JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<h1>Hello There</h1>
<div>First Paragraph</div>
<template id="custom-paragraph">
  <style>
    p {
      color: white;
      background-color: #666666;
      padding: 5px;
    }
  </style>
  <p>
    Template: 
    <slot name="my-text">My default text</slot>
    <slot></slot>
  </p>
</template>
<div>Second Paragraphs</div>
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
  <span>This will go into the unnamed slot</span>
  <span>This will also go into the unnamed slot</span>
</my-paragraph>

JavaScript

customElements.define(
  "my-paragraph",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("custom-paragraph");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);