custom component in plain html

index.html

<!-- Modular component example -->
<template id="my-component">
  <style>
    /* Component-specific styles */
    .container {
      padding: 10px;
      background-color: #f0f0f0;
    }
  </style>
  <div class="container">
    <h1>My Component</h1>
    <p>This is a modular component.</p>
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-component').content;
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  }

  customElements.define('my-component', MyComponent);
</script>

<my-component></my-component>