JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<h1>Simple template</h1>

  <template id="my-paragraph">
    <style>
      p {
        color: white;
        background-color: #666;
        padding: 5px;
      }
    </style>
    <p><slot></slot></p>
    <p><slot name="my-text">My default text</slot></p>
    <p><slot name="my-text2">My default text</slot></p>
  </template>

  <my-paragraph>
    <span slot="my-text2">2</span>
    <span slot="my-text">Let's have some different text!</span>
    <span>3</span>
  </my-paragraph>

  <my-paragraph>
    <ul slot="my-text">
      <li>Let's have some different text!</li>
      <li>In a list!</li>
    </ul>
  </my-paragraph>
  
  <p>
  sdf</p>

JavaScript

customElements.define('my-paragraph',
  class extends HTMLElement {
		get state() {
    	return this._state
    }
    set state(value) {
	    this._state = value
    }
    constructor() {
      super();

      const template = document.getElementById('my-paragraph');
      const templateContent = template.content;

      this.attachShadow({mode: 'open'}).appendChild(
        templateContent.cloneNode(true)
      );
    }
  }
);

const slottedSpan = document.querySelector('my-paragraph span');

console.log(slottedSpan.assignedSlot);
console.log(slottedSpan.slot);