Sling Academy
Home/JavaScript/Encapsulate Styles and Logic Using JavaScript Web Components

Encapsulate Styles and Logic Using JavaScript Web Components

Last updated: December 13, 2024

Web Components are a set of technologies that enable developers to create reusable small-to-medium pieces of functionality across applications without concerns of collision in styles or needing to rely on complex JavaScript frameworks. The technology is an advancement in web development that includes custom elements, shadow DOM, and HTML templates.

What Are Web Components?

Web Components are a set of APIs made available by modern browsers that allow developers to create truly encapsulated and reusable elements. With Web Components, you can create new custom HTML tags, style them privately using shadow DOM, and define the structure with HTML Templates.

Custom Elements

Custom elements define new HTML elements in a page. You can attach behavior to these elements with custom events and logic:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>:host { display: block; }</style>
      <div>Hello from Web Component!</div>
    `;
  }
}
customElements.define('my-element', MyElement);

In the snippet above, a new custom element my-element is created. The constructor function attaches a shadow DOM to separate the element's scope. This ensures the encapsulation of both styles and HTML content.

Shadow DOM

The shadow DOM is a critical part of the encapsulation in Web Components. It allows us to isolate styles and content, protecting against style clashes in the document. Consider the following CSS rule which will only apply within our component:

:host {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
}

The ':host' selector styles the root of the web component. It ensures that CSS does not bleed out to other components or the encompassing web page and vice versa.

HTML Template

HTML Templates pertain to the structure of the web component. They allow the reuse of the markup by defining the HTML structure inside a template element:

<template id="my-element-template">
  <style>
    div {
      color: purple;
    }
  </style>
  <div>Hello from Template!</div>
</template>

This template structure can then be cloned for each instance of the component.

Putting It All Together

Let's create a more integrated example, encapsulating both styles and interaction logic:

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

    this.shadowRoot.appendChild(instance);

    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      alert('Button clicked!');
    });
  }
}
customElements.define('button-element', ButtonElement);
<template id="button-template">
  <style>
    button {
      border: none;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
  <button>Click me</button>
</template>

Here, ButtonElement utilizes a shadow DOM to apply styles locally and incorporates an HTML template for markup. The component is interactive, responding to click events with a popup. This encapsulates the functionality within our web component without leaking to the outside page.

Conclusion

Web components are powerful tools for encapsulating the unique logic and style each component requires. By defining custom elements, employing shadow DOM for isolating styles, and reusing structure with HTML templates, web components provide a modern and efficient approach for modular web development. Start implementing them in your projects today to harness their full potential.

Next Article: Reuse UI Blocks Across Projects via JavaScript Web Components

Previous Article: Build Custom Elements with Web Components in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration