Создание собственного простейшего элемента

https://yocton.ru/html-elements/global-attributes/slot

by yocton

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Мой абзац</title>
  </head>
  <body>
    <template id="my-paragraph">
  <style>
    p {
      color: white;
      background-color: #666;
      padding: 5px;
    }
  </style>
  <p><slot name="my-text">Текст абзаца по умолчанию</slot></p>
</template>

    <my-paragraph>
    </my-paragraph>
    
    <my-paragraph>
      <span slot="my-text">Другой какой-то текст</span>
    </my-paragraph>
    
    <my-paragraph>
      <ul slot="my-text">
        <li>Можно заменить</li>
        <li>и списком</li>
      </ul>
    </my-paragraph>

  </body>
</html>

JavaScript

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

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