#121 How to create Web Components? Explain with examples

Web Components are reusable custom elements created using standard web APIs and can work across all modern browsers and frameworks like React, Angular, Vue.

---

✅ Core Technologies Used:

1. Custom Elements – Define new HTML tags.
2. Shadow DOM – Encapsulate styles and structure.
3. HTML Templates – Define reusable HTML structures.

---

✅ Example: Create a Custom <my-button> Web Component

🧩 Step 1: HTML Template

<template id="my-button-template">
  <style>
    button {
      background-color: teal;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
  <button><slot></slot></button>
</template>

🧩 Step 2: JavaScript to Register the Component

class MyButton extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('my-button-template').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
  }
}

customElements.define('my-button', MyButton);

🧩 Step 3: Use It in HTML

<my-button>Click Me</my-button>

---

✅ Benefits of Web Components

• Fully encapsulated styles and scripts.
• Reusable across frameworks.
• Reduces code duplication.

---

✅ Use in Frameworks

React Example:

useEffect(() => {
  import('./MyButton.js'); // your web component file
}, []);

<my-button>React Button</my-button>