Web Components | Advanced | Javascript Essentials Tutorial

Creating and using web components

Web Components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements. This tutorial covers the basics of creating and using web components in JavaScript.

Key Points:

Web Components consist of Custom Elements, Shadow DOM, and HTML Templates.
Custom Elements allow you to define new HTML tags.
Shadow DOM provides encapsulation, keeping CSS and JavaScript scoped to the component.
HTML Templates are used to define the markup for your web components.

Custom Elements

Custom Elements allow you to define new HTML tags. You can create a class that extends HTMLElement and use the customElements.define method to register your custom element.


// Define a custom element
class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = <h1>Hello, Web Components!</h1>;
    }
}

// Register the custom element
customElements.define('my-custom-element', MyCustomElement);

// Use the custom element in HTML
// <my-custom-element></my-custom-element>

Shadow DOM

Shadow DOM provides encapsulation for your web components, ensuring that their styles and scripts do not affect the rest of the document.


// Define a custom element with Shadow DOM
class MyShadowElement extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const style = document.createElement('style');
        const div = document.createElement('div');
        style.textContent = 'div { color: red; }';
        div.textContent = 'Hello, Shadow DOM!';
        shadow.appendChild(style);
        shadow.appendChild(div);
    }
}

// Register the custom element
customElements.define('my-shadow-element', MyShadowElement);

// Use the custom element in HTML
// <my-shadow-element></my-shadow-element>

HTML Templates

HTML Templates are used to define the markup for your web components. You can use the <template> tag to define a template and clone its content in your custom element.


// Define a template in HTML
// <template id="my-template">
//     <style>div { color: blue; }</style>
//     <div>Hello, Template!</div>
// </template>

// Define a custom element using the template
class MyTemplateElement extends HTMLElement {
    constructor() {
        super();
        const template = document.getElementById('my-template').content;
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.appendChild(template.cloneNode(true));
    }
}

// Register the custom element
customElements.define('my-template-element', MyTemplateElement);

// Use the custom element in HTML
// <my-template-element></my-template-element>

Example: Creating a Custom Button

Let's create a custom button component with encapsulated styles and behavior.


// Define the custom button element
class MyButton extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const button = document.createElement('button');
        button.textContent = 'Click me';
        button.addEventListener('click', () => alert('Button clicked!'));
        shadow.appendChild(button);
    }
}

// Register the custom element
customElements.define('my-button', MyButton);

// Use the custom element in HTML
// <my-button></my-button>

Summary

In this tutorial, you learned about creating and using web components in JavaScript. Web Components allow you to create custom, reusable, and encapsulated HTML elements using Custom Elements, Shadow DOM, and HTML Templates. By leveraging these technologies, you can build modular and maintainable web applications.