HTML · Web Components

Web Components Introduction

Learn the fundamentals of Web Components - the future of reusable web development

Find videos you like?

Save to resource drawer for future reference!

What are Web Components?

A set of web platform APIs that allow you to create reusable custom elements

Web Components are a suite of native browser technologies that let you create reusable, encapsulated HTML elements with their own functionality. They work in any JavaScript framework or none at all.

Think of Them Like LEGO Blocks 🧱

Each Web Component is a self-contained building block. You can snap them together to build complex applications, and they'll work the same way every time, anywhere you use them.

Reusable

Write once, use everywhere across projects

Encapsulated

Styles and scripts don't leak out or in

Native

Built into browsers, no framework needed

1. Your First Web Component

See how simple it is to create a custom HTML element

Simple Web Component

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Web Component</title>
  </head>
  <body>
    <div class="container">
      <h1>🧩 My First Web Component</h1>
      <div class="demo-area">
        <!-- Use the custom element -->
        <greeting-card name="Alice"></greeting-card>
          <greeting-card name="Bob"></greeting-card>
            <greeting-card name="Charlie"></greeting-card>
            </div>
            <div class="info">
              <h3>✨ What Just Happened?</h3>
              <p>
                We created a custom HTML element called <code>&lt;greeting-card&gt;</code>!
                It's reusable, encapsulated, and works just like built-in HTML elements.
              </p>
            </div>
          </div>
        </body>
      </html>

Live Preview

Loading preview...

How It Works:

Create a class that extends HTMLElement
Define behavior in connectedCallback()
Register with customElements.define()
Use your custom tag like any HTML element!

2. The 3 Core Technologies

Web Components are built on three main specifications

Three Parts of Web Components

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components: The 3 Parts</title>
  </head>
  <body>
    <div class="container">
      <h1>🎯 The 3 Core Technologies</h1>
      <div class="parts-grid">
        <!-- Part 1: Custom Elements -->
        <div class="part-card">
          <div class="part-header part-1">
            <h3>1️⃣ Custom Elements</h3>
            <p style="opacity: 0.9; font-size: 14px;">Create your own HTML tags</p>
          </div>
          <div class="part-body">
            <h4>What it does:</h4>
            <p>Define new HTML elements with custom behavior</p>
            <div class="code-snippet">
              <code>class MyElement extends HTMLElement {
                // Custom behavior
                }
                customElements.define(
                'my-element',
                MyElement
                );</code>
              </div>
            </div>
          </div>
          <!-- Part 2: Shadow DOM -->
          <div class="part-card">
            <div class="part-header part-2">
              <h3>2️⃣ Shadow DOM</h3>
              <p style="opacity: 0.9; font-size: 14px;">Encapsulate styles & markup</p>
            </div>
            <div class="part-body">
              <h4>What it does:</h4>
              <p>Creates isolated DOM tree with scoped CSS</p>
              <div class="code-snippet">
                <code>const shadow =
                  this.attachShadow({
                  mode: 'open'
                  });
                  shadow.innerHTML = `
                  <div>Content</div>
                  `;</code>
                </div>
              </div>
            </div>
            <!-- Part 3: HTML Templates -->
            <div class="part-card">
              <div class="part-header part-3">
                <h3>3️⃣ HTML Templates</h3>
                <p style="opacity: 0.9; font-size: 14px;">Reusable markup patterns</p>
              </div>
              <div class="part-body">
                <h4>What it does:</h4>
                <p>Define reusable HTML chunks that can be cloned</p>
                <div class="code-snippet">
                  <code>&lt;template id="my-template"&gt;
                    &lt;div&gt;Reusable!&lt;/div&gt;
                    &lt;/template&gt;
                    const template =
                    document.querySelector(
                    '#my-template'
                    );</code>
                  </div>
                </div>
              </div>
            </div>
            <div class="demo-section">
              <h2>🚀 All 3 Technologies Together!</h2>
              <p style="color: #6b7280; margin-bottom: 30px;">
                Custom Element + Shadow DOM + Template = Powerful Web Component
              </p>
              <!-- Use the component -->
              <complete-component></complete-component>
              </div>
            </div>
          </body>
        </html>

Live Preview

Loading preview...

🎯 The Power of Three:

Custom Elements:

Define your own HTML tags with custom behavior

Shadow DOM:

Encapsulate styles and markup from the rest of the page

HTML Templates:

Define reusable markup that can be cloned and inserted

3. Why Use Web Components?

The advantages of using Web Components in your projects

Benefits of Web Components

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Why Use Web Components?</title>
  </head>
  <body>
    <div class="container">
      <h1>💎 Benefits of Web Components</h1>
      <div class="benefits-grid">
        <div class="benefit-card">
          <div class="icon">♻️</div>
          <h3>Reusability</h3>
          <p>Write once, use anywhere. Components work across different projects and frameworks.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🔒</div>
          <h3>Encapsulation</h3>
          <p>Styles and scripts are scoped. No conflicts with the rest of your page.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🎨</div>
          <h3>Maintainability</h3>
          <p>Self-contained components are easier to update, test, and debug.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🚀</div>
          <h3>Framework Agnostic</h3>
          <p>Use with React, Vue, Angular, or vanilla JavaScript. No lock-in.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">📦</div>
          <h3>Native Browser Support</h3>
          <p>No build tools required. Works directly in the browser.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">⚡</div>
          <h3>Performance</h3>
          <p>Lightweight and fast. No framework overhead needed.</p>
        </div>
      </div>
      <div class="demo">
        <h2>📊 Before vs After</h2>
        <div class="comparison">
          <div class="before">
            <h4>❌ Without Web Components</h4>
            <pre><code>&lt;!-- Repeated code everywhere --&gt;
              &lt;div class="card card-blue"&gt;
              &lt;div class="card-header"&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
              &lt;p&gt;Content&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- CSS conflicts --&gt;
              &lt;style&gt;
              .card { /* Might affect others */ }
              &lt;/style&gt;</code></pre>
            </div>
            <div class="after">
              <h4>✅ With Web Components</h4>
              <pre><code>&lt;!-- Clean and reusable --&gt;
                &lt;custom-card
                title="Title"
                color="blue"&gt;
                Content
                &lt;/custom-card&gt;
                &lt;!-- Styles are scoped --&gt;
                &lt;!-- No conflicts! --&gt;
                &lt;!-- Works everywhere! --&gt;</code></pre>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

Web Component Architecture

Regular DOM

↓

<my-component>

Shadow DOM (Encapsulated)

🔒 Styles & Scripts Isolated

Real-World Use Cases

🎨 Design Systems

Build consistent UI components for your entire organization

📦 Widget Libraries

Create embeddable widgets that work anywhere

🔧 Micro Frontends

Build independent, framework-agnostic modules

⚡ Progressive Enhancement

Add features that degrade gracefully

Browser Support

Web Components are supported in all modern browsers: Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+. For older browsers, use polyfills.

Previous Topic

Embed & Object

Next Topic

Custom Elements

Creating custom HTML elements with the Custom Elements API.

Ask a Question

Have a question about Web Components Introduction? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Web Components

Web Components Introduction

Learn the fundamentals of Web Components - the future of reusable web development

Find videos you like?

Save to resource drawer for future reference!

What are Web Components?

A set of web platform APIs that allow you to create reusable custom elements

Web Components are a suite of native browser technologies that let you create reusable, encapsulated HTML elements with their own functionality. They work in any JavaScript framework or none at all.

Think of Them Like LEGO Blocks 🧱

Each Web Component is a self-contained building block. You can snap them together to build complex applications, and they'll work the same way every time, anywhere you use them.

Reusable

Write once, use everywhere across projects

Encapsulated

Styles and scripts don't leak out or in

Native

Built into browsers, no framework needed

1. Your First Web Component

See how simple it is to create a custom HTML element

Simple Web Component

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Web Component</title>
  </head>
  <body>
    <div class="container">
      <h1>🧩 My First Web Component</h1>
      <div class="demo-area">
        <!-- Use the custom element -->
        <greeting-card name="Alice"></greeting-card>
          <greeting-card name="Bob"></greeting-card>
            <greeting-card name="Charlie"></greeting-card>
            </div>
            <div class="info">
              <h3>✨ What Just Happened?</h3>
              <p>
                We created a custom HTML element called <code>&lt;greeting-card&gt;</code>!
                It's reusable, encapsulated, and works just like built-in HTML elements.
              </p>
            </div>
          </div>
        </body>
      </html>

Live Preview

Loading preview...

How It Works:

Create a class that extends HTMLElement
Define behavior in connectedCallback()
Register with customElements.define()
Use your custom tag like any HTML element!

2. The 3 Core Technologies

Web Components are built on three main specifications

Three Parts of Web Components

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components: The 3 Parts</title>
  </head>
  <body>
    <div class="container">
      <h1>🎯 The 3 Core Technologies</h1>
      <div class="parts-grid">
        <!-- Part 1: Custom Elements -->
        <div class="part-card">
          <div class="part-header part-1">
            <h3>1️⃣ Custom Elements</h3>
            <p style="opacity: 0.9; font-size: 14px;">Create your own HTML tags</p>
          </div>
          <div class="part-body">
            <h4>What it does:</h4>
            <p>Define new HTML elements with custom behavior</p>
            <div class="code-snippet">
              <code>class MyElement extends HTMLElement {
                // Custom behavior
                }
                customElements.define(
                'my-element',
                MyElement
                );</code>
              </div>
            </div>
          </div>
          <!-- Part 2: Shadow DOM -->
          <div class="part-card">
            <div class="part-header part-2">
              <h3>2️⃣ Shadow DOM</h3>
              <p style="opacity: 0.9; font-size: 14px;">Encapsulate styles & markup</p>
            </div>
            <div class="part-body">
              <h4>What it does:</h4>
              <p>Creates isolated DOM tree with scoped CSS</p>
              <div class="code-snippet">
                <code>const shadow =
                  this.attachShadow({
                  mode: 'open'
                  });
                  shadow.innerHTML = `
                  <div>Content</div>
                  `;</code>
                </div>
              </div>
            </div>
            <!-- Part 3: HTML Templates -->
            <div class="part-card">
              <div class="part-header part-3">
                <h3>3️⃣ HTML Templates</h3>
                <p style="opacity: 0.9; font-size: 14px;">Reusable markup patterns</p>
              </div>
              <div class="part-body">
                <h4>What it does:</h4>
                <p>Define reusable HTML chunks that can be cloned</p>
                <div class="code-snippet">
                  <code>&lt;template id="my-template"&gt;
                    &lt;div&gt;Reusable!&lt;/div&gt;
                    &lt;/template&gt;
                    const template =
                    document.querySelector(
                    '#my-template'
                    );</code>
                  </div>
                </div>
              </div>
            </div>
            <div class="demo-section">
              <h2>🚀 All 3 Technologies Together!</h2>
              <p style="color: #6b7280; margin-bottom: 30px;">
                Custom Element + Shadow DOM + Template = Powerful Web Component
              </p>
              <!-- Use the component -->
              <complete-component></complete-component>
              </div>
            </div>
          </body>
        </html>

Live Preview

Loading preview...

🎯 The Power of Three:

Custom Elements:

Define your own HTML tags with custom behavior

Shadow DOM:

Encapsulate styles and markup from the rest of the page

HTML Templates:

Define reusable markup that can be cloned and inserted

3. Why Use Web Components?

The advantages of using Web Components in your projects

Benefits of Web Components

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Why Use Web Components?</title>
  </head>
  <body>
    <div class="container">
      <h1>💎 Benefits of Web Components</h1>
      <div class="benefits-grid">
        <div class="benefit-card">
          <div class="icon">♻️</div>
          <h3>Reusability</h3>
          <p>Write once, use anywhere. Components work across different projects and frameworks.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🔒</div>
          <h3>Encapsulation</h3>
          <p>Styles and scripts are scoped. No conflicts with the rest of your page.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🎨</div>
          <h3>Maintainability</h3>
          <p>Self-contained components are easier to update, test, and debug.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">🚀</div>
          <h3>Framework Agnostic</h3>
          <p>Use with React, Vue, Angular, or vanilla JavaScript. No lock-in.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">📦</div>
          <h3>Native Browser Support</h3>
          <p>No build tools required. Works directly in the browser.</p>
        </div>
        <div class="benefit-card">
          <div class="icon">⚡</div>
          <h3>Performance</h3>
          <p>Lightweight and fast. No framework overhead needed.</p>
        </div>
      </div>
      <div class="demo">
        <h2>📊 Before vs After</h2>
        <div class="comparison">
          <div class="before">
            <h4>❌ Without Web Components</h4>
            <pre><code>&lt;!-- Repeated code everywhere --&gt;
              &lt;div class="card card-blue"&gt;
              &lt;div class="card-header"&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
              &lt;p&gt;Content&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- CSS conflicts --&gt;
              &lt;style&gt;
              .card { /* Might affect others */ }
              &lt;/style&gt;</code></pre>
            </div>
            <div class="after">
              <h4>✅ With Web Components</h4>
              <pre><code>&lt;!-- Clean and reusable --&gt;
                &lt;custom-card
                title="Title"
                color="blue"&gt;
                Content
                &lt;/custom-card&gt;
                &lt;!-- Styles are scoped --&gt;
                &lt;!-- No conflicts! --&gt;
                &lt;!-- Works everywhere! --&gt;</code></pre>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

Web Component Architecture

Regular DOM

↓

<my-component>

Shadow DOM (Encapsulated)

🔒 Styles & Scripts Isolated

Real-World Use Cases

🎨 Design Systems

Build consistent UI components for your entire organization

📦 Widget Libraries

Create embeddable widgets that work anywhere

🔧 Micro Frontends

Build independent, framework-agnostic modules

⚡ Progressive Enhancement

Add features that degrade gracefully

Browser Support

Web Components are supported in all modern browsers: Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+. For older browsers, use polyfills.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Embed & Object

Custom Elements

HTML Code Editor

Building Your Learning Module...

Web Components Introduction

Think of Them Like LEGO Blocks 🧱

Reusable

Encapsulated

Native

Simple Web Component

How It Works:

Three Parts of Web Components

🎯 The Power of Three:

Benefits of Web Components

🎨 Design Systems

📦 Widget Libraries

🔧 Micro Frontends

⚡ Progressive Enhancement

Browser Support

Embed & Object

Custom Elements

HTML Code Editor

Web Components Introduction

Think of Them Like LEGO Blocks 🧱

Reusable

Encapsulated

Native

Simple Web Component

How It Works:

Three Parts of Web Components

🎯 The Power of Three:

Benefits of Web Components

🎨 Design Systems

📦 Widget Libraries

🔧 Micro Frontends

⚡ Progressive Enhancement

Browser Support