Table of Contents

Comprehensive Guide to HTML5 Web Components Basics

Introduction

HTML5 Web Components are a set of web platform APIs that allow developers to create reusable, encapsulated custom HTML elements with their own functionality, styling, and behavior. Web Components provide a standardized way to build modular, maintainable, and interoperable UI components that can be used across different frameworks and applications.

Web Components consist of four main technologies that work together:

Custom Elements - Define new HTML tags with custom behavior
Shadow DOM - Encapsulate component styling and markup
HTML Templates - Define reusable markup structures
HTML Imports - (Deprecated) Import and reuse HTML documents

Web Components enable true component-based development on the web, allowing developers to create self-contained UI elements that can be easily shared, reused, and maintained without conflicts between different parts of an application.

Custom Elements

Defining Custom Elements

Custom elements allow you to create new HTML tags with custom functionality. There are two types of custom elements:

Autonomous Custom Elements

Completely new elements that extend HTMLElement:

// Define the custom element class
class MyButton extends HTMLElement {
constructor() {
super();
// Create shadow DOM
this.attachShadow({ mode: 'open' });
// Add content to shadow DOM
this.shadowRoot.innerHTML = `
<style>
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
</style>
<button>
<slot>Click Me</slot>
</button>
`;
}
// Lifecycle callbacks
connectedCallback() {
console.log('MyButton element added to DOM');
this.shadowRoot.querySelector('button').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('my-click', { bubbles: true }));
});
}
disconnectedCallback() {
console.log('MyButton element removed from DOM');
}
// Getter and setter for properties
get label() {
return this.getAttribute('label');
}
set label(value) {
this.setAttribute('label', value);
}
}
// Register the custom element
customElements.define('my-button', MyButton);

Usage in HTML:

<my-button>Custom Button</my-button>
<my-button label="Submit Form">Submit</my-button>
<script>
// Listen for custom events
document.querySelector('my-button').addEventListener('my-click', () => {
console.log('Custom button clicked!');
});
</script>

Customized Built-in Elements

Extend existing HTML elements:

class MyInput extends HTMLInputElement {
constructor() {
super();
// Add custom validation
this.addEventListener('blur', () => {
if (this.required && !this.value) {
this.setCustomValidity('This field is required');
} else {
this.setCustomValidity('');
}
});
}
static get observedAttributes() {
return ['required'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'required') {
console.log('Required attribute changed');
}
}
}
// Register with extends option
customElements.define('my-input', MyInput, { extends: 'input' });

Usage in HTML:

<input is="my-input" type="text" required placeholder="Enter text">

Custom Element Lifecycle Callbacks

Custom elements provide several lifecycle callbacks:

class MyComponent extends HTMLElement {
constructor() {
super();
// Called when element is created
console.log('Constructor called');
}
static get observedAttributes() {
// Return array of attributes to observe
return ['title', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
// Called when observed attributes change
console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
}
connectedCallback() {
// Called when element is added to DOM
console.log('Element connected to DOM');
}
disconnectedCallback() {
// Called when element is removed from DOM
console.log('Element disconnected from DOM');
}
adoptedCallback() {
// Called when element is moved to new document
console.log('Element adopted by new document');
}
}
customElements.define('my-component', MyComponent);

Shadow DOM

What is Shadow DOM?

Shadow DOM provides encapsulation for component styling and markup, preventing styles and scripts from leaking between the component and the main document.

Creating Shadow DOM

class MyCard extends HTMLElement {
constructor() {
super();
// Create shadow root with open mode (accessible from outside)
this.shadow = this.attachShadow({ mode: 'open' });
// Or create with closed mode (inaccessible from outside)
// this.shadow = this.attachShadow({ mode: 'closed' });
this.shadow.innerHTML = `
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
color: #2c3e50;
margin: 0 0 8px 0;
}
.card-content {
color: #7f8c8d;
line-height: 1.6;
}
</style>
<div class="card">
<h3 class="card-title">
<slot name="title">Default Title</slot>
</h3>
<p class="card-content">
<slot name="content">Default content</slot>
</p>
</div>
`;
}
}
customElements.define('my-card', MyCard);

Shadow DOM Modes

Open mode: Shadow DOM is accessible via element.shadowRoot
Closed mode: Shadow DOM is not accessible from outside the component

CSS Encapsulation

Styles defined in Shadow DOM only apply to the component's internal elements:

// Main document CSS
document.head.innerHTML += `
<style>
.card { background-color: red; } /* This won't affect the component */
h3 { color: purple; } /* This won't affect the component's h3 */
</style>
`;
// Component CSS (in Shadow DOM)
// .card { background-color: white; } /* This only affects the component */
// h3 { color: #2c3e50; } /* This only affects the component's h3 */

CSS Custom Properties (Variables)

Use CSS custom properties to allow external styling of Shadow DOM:

class StyledButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button {
background-color: var(--button-bg, #3498db);
color: var(--button-color, white);
border: var(--button-border, none);
padding: var(--button-padding, 10px 20px);
border-radius: var(--button-radius, 4px);
font-size: var(--button-font-size, 16px);
}
</style>
<button>
<slot>Click Me</slot>
</button>
`;
}
}
customElements.define('styled-button', StyledButton);

Usage with custom properties:

<style>
styled-button {
--button-bg: #e74c3c;
--button-color: white;
--button-padding: 12px 24px;
}
</style>
<styled-button>Custom Styled Button</styled-button>

HTML Templates

Template Element Basics

The <template> element allows you to define markup that is not rendered but can be cloned and used later:

<template id="user-card-template">
<style>
.user-card {
border: 1px solid #ccc;
padding: 16px;
margin: 8px;
border-radius: 4px;
}
.user-name { font-weight: bold; }
.user-email { color: #666; }
</style>
<div class="user-card">
<div class="user-name"></div>
<div class="user-email"></div>
</div>
</template>
<script>
class UserCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
// Clone template content
const template = document.getElementById('user-card-template');
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
const name = this.getAttribute('name');
const email = this.getAttribute('email');
this.shadowRoot.querySelector('.user-name').textContent = name;
this.shadowRoot.querySelector('.user-email').textContent = email;
}
}
customElements.define('user-card', UserCard);
</script>

Dynamic Template Usage

Create templates programmatically:

class DynamicList extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
const items = JSON.parse(this.getAttribute('items') || '[]');
// Create template dynamically
const template = document.createElement('template');
template.innerHTML = `
<style>
.list { list-style: none; padding: 0; }
.list-item { padding: 8px; border-bottom: 1px solid #eee; }
</style>
<ul class="list"></ul>
`;
this.shadowRoot.appendChild(template.content.cloneNode(true));
// Add items to list
const list = this.shadowRoot.querySelector('.list');
items.forEach(item => {
const li = document.createElement('li');
li.className = 'list-item';
li.textContent = item;
list.appendChild(li);
});
}
}
customElements.define('dynamic-list', DynamicList);

Usage:

<dynamic-list items='["Item 1", "Item 2", "Item 3"]'></dynamic-list>

Complete Web Component Example

Building a Reusable Modal Component

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
/* Global styles don't affect Web Components */
button {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>Web Components Examples</h1>
<!-- Custom Button -->
<my-button id="custom-btn">Custom Button</my-button>
<my-button variant="primary">Primary Button</my-button>
<my-button variant="secondary">Secondary Button</my-button>
<!-- User Card -->
<user-card name="John Doe" email="[email protected]" avatar="👤"></user-card>
<user-card name="Jane Smith" email="[email protected]" avatar="👩"></user-card>
<!-- Modal Trigger -->
<button id="open-modal">Open Modal</button>
<!-- Modal Component -->
<modal-dialog id="my-modal" title="Welcome to Web Components">
<p>This is a modal dialog built with Web Components!</p>
<p>Notice how the styling is completely encapsulated.</p>
</modal-dialog>
<script>
// Custom Button Component
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: inline-block;
margin: 5px;
}
button {
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.2s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Primary variant */
button.primary {
background-color: #3498db;
color: white;
}
button.primary:hover {
background-color: #2980b9;
}
/* Secondary variant */
button.secondary {
background-color: #95a5a6;
color: white;
}
button.secondary:hover {
background-color: #7f8c8d;
}
/* Default variant */
button.default {
background-color: #2ecc71;
color: white;
}
button.default:hover {
background-color: #27ae60;
}
</style>
<button class="default">
<slot>Click Me</slot>
</button>
`;
}
static get observedAttributes() {
return ['variant'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'variant') {
const button = this.shadowRoot.querySelector('button');
button.className = newValue || 'default';
}
}
connectedCallback() {
this.shadowRoot.querySelector('button').addEventListener('click', () => {
this.dispatchEvent(new CustomEvent('my-click', { 
bubbles: true, 
detail: { source: this }
}));
});
}
}
// User Card Component
class UserCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.card {
background: white;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 16px;
}
.avatar {
font-size: 24px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ecf0f1;
border-radius: 50%;
}
.info {
flex: 1;
}
.name {
font-weight: bold;
color: #2c3e50;
margin: 0 0 4px 0;
}
.email {
color: #7f8c8d;
font-size: 14px;
margin: 0;
}
</style>
<div class="card">
<div class="avatar">
<slot name="avatar">👤</slot>
</div>
<div class="info">
<div class="name">
<slot name="name">Unknown User</slot>
</div>
<div class="email">
<slot name="email">[email protected]</slot>
</div>
</div>
</div>
`;
}
connectedCallback() {
// Set default avatar if not provided
const avatar = this.getAttribute('avatar');
if (avatar) {
this.shadowRoot.querySelector('.avatar').textContent = avatar;
}
const name = this.getAttribute('name');
if (name) {
this.shadowRoot.querySelector('.name').textContent = name;
}
const email = this.getAttribute('email');
if (email) {
this.shadowRoot.querySelector('.email').textContent = email;
}
}
}
// Modal Dialog Component
class ModalDialog extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.backdrop.open {
opacity: 1;
visibility: visible;
}
.modal {
background: white;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
margin: 0;
color: #2c3e50;
}
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #7f8c8d;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.close-btn:hover {
background-color: #f8f9fa;
color: #2c3e50;
}
.modal-content {
padding: 24px;
color: #34495e;
line-height: 1.6;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid #eee;
text-align: right;
}
</style>
<div class="backdrop">
<div class="modal">
<div class="modal-header">
<h2 class="modal-title">
<slot name="title">Modal Title</slot>
</h2>
<button class="close-btn" aria-label="Close">&times;</button>
</div>
<div class="modal-content">
<slot>Modal content</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="primary">OK</button>
</slot>
</div>
</div>
</div>
`;
}
connectedCallback() {
const backdrop = this.shadowRoot.querySelector('.backdrop');
const closeBtn = this.shadowRoot.querySelector('.close-btn');
const title = this.getAttribute('title');
if (title) {
this.shadowRoot.querySelector('.modal-title').textContent = title;
}
closeBtn.addEventListener('click', () => this.close());
backdrop.addEventListener('click', (e) => {
if (e.target === backdrop) {
this.close();
}
});
// Handle Escape key
this.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
this.close();
}
});
}
open() {
this.shadowRoot.querySelector('.backdrop').classList.add('open');
this.setAttribute('open', '');
this.focus();
}
close() {
this.shadowRoot.querySelector('.backdrop').classList.remove('open');
this.removeAttribute('open');
this.dispatchEvent(new CustomEvent('modal-close', { bubbles: true }));
}
// Make component focusable
get tabIndex() {
return this.hasAttribute('open') ? 0 : -1;
}
}
// Register all components
customElements.define('my-button', MyButton);
customElements.define('user-card', UserCard);
customElements.define('modal-dialog', ModalDialog);
// Initialize modal functionality
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('my-modal');
const openBtn = document.getElementById('open-modal');
openBtn.addEventListener('click', () => {
modal.open();
});
// Handle custom button clicks
document.querySelectorAll('my-button').forEach(button => {
button.addEventListener('my-click', (e) => {
console.log('Custom button clicked:', e.detail.source);
});
});
});
</script>
</body>
</html>

Advanced Web Component Patterns

Using ES6 Classes with Template Literals

class AdvancedComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.render();
}
get styles() {
return `
<style>
:host {
display: block;
margin: 16px 0;
}
.container {
padding: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
`;
}
get template() {
return `
<div class="container">
<h3>${this.title || 'Default Title'}</h3>
<p>${this.content || 'Default content'}</p>
</div>
`;
}
render() {
this.shadowRoot.innerHTML = this.styles + this.template;
}
static get observedAttributes() {
return ['title', 'content'];
}
attributeChangedCallback() {
this.render();
}
get title() {
return this.getAttribute('title');
}
set title(value) {
this.setAttribute('title', value);
}
get content() {
return this.getAttribute('content');
}
set content(value) {
this.setAttribute('content', value);
}
}
customElements.define('advanced-component', AdvancedComponent);

Composition with Slots

class CardContainer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
</style>
<div class="container">
<slot></slot>
</div>
`;
}
}
customElements.define('card-container', CardContainer);

Usage:

<card-container>
<user-card name="John" email="[email protected]"></user-card>
<user-card name="Jane" email="[email protected]"></user-card>
<user-card name="Bob" email="[email protected]"></user-card>
</card-container>

Browser Support and Polyfills

Current Browser Support

Chrome: Full support (v54+)
Firefox: Full support (v63+)
Safari: Full support (v10.1+)
Edge: Full support (v79+)
Internet Explorer: No support (use polyfills)

Using Polyfills for Older Browsers

<!-- Load polyfills for older browsers -->
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
<!-- Your Web Components code -->
<script>
// Check if polyfills are needed
if (!window.customElements) {
console.log('Using polyfills for Web Components');
}
</script>

Best Practices

1. Use Semantic Naming

Choose meaningful names for custom elements:

// Good
customElements.define('user-profile', UserProfile);
customElements.define('product-card', ProductCard);
customElements.define('modal-dialog', ModalDialog);
// Avoid
customElements.define('my-el', MyElement);
customElements.define('comp1', Component1);

2. Follow Naming Conventions

Custom element names must contain a hyphen:

// Valid
customElements.define('my-button', MyButton);
customElements.define('user-card', UserCard);
// Invalid (will throw error)
customElements.define('mybutton', MyButton);
customElements.define('usercard', UserCard);

3. Provide Default Content

Use slots with fallback content:

<template>
<div class="card">
<h3><slot name="title">Default Title</slot></h3>
<p><slot name="content">Default content</slot></p>
</div>
</template>

4. Handle Attributes Properly

Observe and respond to attribute changes:

static get observedAttributes() {
return ['disabled', 'variant', 'size'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.updateComponent();
}
}

5. Manage Memory and Cleanup

Remove event listeners in disconnectedCallback:

connectedCallback() {
this.clickHandler = () => console.log('clicked');
this.addEventListener('click', this.clickHandler);
}
disconnectedCallback() {
this.removeEventListener('click', this.clickHandler);
}

6. Use CSS Custom Properties for Theming

Allow external customization through CSS variables:

/* In Shadow DOM */
:host {
--primary-color: #3498db;
--text-color: #2c3e50;
}
.button {
background-color: var(--primary-color);
color: var(--text-color);
}

7. Document Your Components

Provide clear documentation for attributes, events, and methods:

/**
* MyButton Web Component
* 
* Attributes:
* - variant: 'primary' | 'secondary' | 'default'
* - disabled: boolean
* 
* Events:
* - my-click: Dispatched when button is clicked
* 
* Methods:
* - focus(): Focus the button
*/
class MyButton extends HTMLElement {
// Implementation
}

Common Pitfalls to Avoid

1. Forgetting the Hyphen in Element Names

// Wrong - will throw error
customElements.define('mybutton', MyButton);
// Right
customElements.define('my-button', MyButton);

2. Not Handling Attribute Changes

// Wrong - component won't update when attributes change
class MyComponent extends HTMLElement {
connectedCallback() {
this.textContent = this.getAttribute('title');
}
}
// Right - observe and handle attribute changes
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['title'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
this.textContent = newValue;
}
}
}

3. Memory Leaks from Event Listeners

// Wrong - event listeners not removed
connectedCallback() {
this.addEventListener('click', this.handleClick);
}
// Right - remove event listeners
connectedCallback() {
this.addEventListener('click', this.handleClick);
}
disconnectedCallback() {
this.removeEventListener('click', this.handleClick);
}

4. Overusing Shadow DOM

// Consider if Shadow DOM is really needed
// For simple components, regular DOM might be sufficient
// Shadow DOM adds complexity and performance overhead

Conclusion

HTML5 Web Components provide a powerful, standardized way to create reusable, encapsulated UI components that work across different frameworks and applications. By combining Custom Elements, Shadow DOM, and HTML Templates, developers can build modular, maintainable, and interoperable web applications.

The key benefits of Web Components include:

Encapsulation: Styles and markup are isolated from the rest of the page
Reusability: Components can be used across different projects and frameworks
Interoperability: Components work with any JavaScript framework or library
Standards-based: Built on web platform APIs, no external dependencies required
Performance: Native browser implementation provides optimal performance

While Web Components require understanding new concepts and patterns, they represent the future of component-based web development. By following best practices and avoiding common pitfalls, developers can create robust, accessible, and maintainable web applications that leverage the full power of the modern web platform.

Mastering Web Components represents an advanced skill in modern web development that demonstrates commitment to standards-based, framework-agnostic, and future-proof web development practices. Proper Web Component implementation forms the foundation of modular, scalable, and maintainable web applications that can evolve effectively over time while maintaining compatibility across different technologies and platforms.

HTML Basics – Elements, Attributes, Headings, Paragraphs, Links, Images, Tables & Forms (Related to HTML)

HTML Elements:
HTML elements are the basic building blocks of a webpage. They define how content like text, images, and sections are structured and displayed in the browser using tags.

HTML Attributes:
HTML attributes provide extra information about elements and control their behavior or properties. They are written inside the opening tag in name-value form.

HTML Headings:
HTML headings are used to define titles and organize content in a hierarchy from <h1> to <h6>, helping structure the page clearly.

HTML Paragraphs:
HTML paragraphs are used to display blocks of text using the <p> tag, helping to separate and organize written content.

HTML Links:
HTML links connect webpages using the <a> tag and the href attribute, allowing navigation between pages or websites.

HTML Images:
HTML images are added using the <img> tag to display pictures on a webpage, with src for the image source and alt for alternative text.

HTML Tables:
HTML tables organize data into rows and columns using <table>, <tr>, <th>, and <td> tags for structured data display.

HTML Forms:
HTML forms are used to collect user input like text and passwords using elements such as <form>, <input>, and <button>.