simple-template/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simple template</title>
  <script src="main.js" defer></script>
</head>
<body>
  <h1>Simple template</h1>

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

  <my-paragraph>
    <span slot="my-text">Let's have some different text!</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>

</body>
</html>