Skip to content
preservelog

Advanced HTML Features— Web Components

16. HTML5 Web Components

Section titled “16. HTML5 Web Components”
  • Introduction to Web Components
  • Overview and benefits of Web Components
  • Custom Elements
  • Creating and using custom HTML elements
  • Shadow DOM
  • Encapsulating styles and scripts
  • HTML Templates
  • Using templates for reusable content

Certainly! The Shadow DOM is a powerful web platform API that’s part of the Web Components suite. It allows for encapsulation of HTML markup, CSS styles, and JavaScript functionality within a component, isolating it from the main document DOM. Here’s a detailed explanation of the Shadow DOM:

Key Concepts:

  1. Encapsulation:
  • Shadow DOM provides a way to encapsulate a component’s internal structure, style, and behavior.
  • It creates a separate DOM tree that’s attached to an element but kept separate from its children.
  1. Shadow Host:
  • The regular DOM node that the Shadow DOM is attached to.
  1. Shadow Tree:
  • The DOM tree inside the Shadow DOM.
  1. Shadow Boundary:
  • The place where the Shadow DOM ends and the regular DOM begins.
  1. Shadow Root:
  • The root node of the Shadow Tree.

Benefits:

  1. Scoped CSS:
  • Styles defined within a Shadow DOM don’t leak out and affect the rest of the page.
  • Styles from the main page don’t penetrate the Shadow DOM.
  1. DOM Encapsulation:
  • The internal structure of a component is hidden and separate from the main document’s DOM.
  1. Simplified CSS:
  • You can use simpler CSS selectors without worrying about naming conflicts.
  1. Self-Contained Components:
  • Makes it easier to create reusable custom elements with their own encapsulated functionality.

Basic Usage:

// Create a shadow root
let div = document.createElement('div');
let shadowRoot = div.attachShadow({mode: 'open'});


// Create elements within the shadow DOM
let paragraph = document.createElement('p');
paragraph.textContent = 'This is shadow DOM content';


// Apply styles
let style = document.createElement('style');
style.textContent = 'p { color: red; }';


// Append elements to the shadow root
shadowRoot.appendChild(style);
shadowRoot.appendChild(paragraph);


// Append the host element to the document
document.body.appendChild(div);

Mode:

  • open: The shadow root can be accessed from JavaScript outside the shadow root.
  • closed: Denies access to the node(s) of a closed shadow root from the outside.

Styling:

  1. :host: Targets the shadow host element.
  2. ::slotted(): Targets elements that have been placed into slots.
:host {
  display: block;
  border: 1px solid black;
}


::slotted(span) {
  color: red;
}

Slots: Slots are placeholders inside your shadow DOM that users can fill with their own markup.

<template id="my-paragraph">
  <p><slot name="my-text">Default text</slot></p>
</template>


<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

Browser Support: Shadow DOM is well-supported in modern browsers, but you might need to use polyfills for older browsers.

Use Cases:

  1. Custom Elements: Creating reusable web components.
  2. Web Components: Building complex UI widgets.
  3. Encapsulating Third-party Widgets: Isolating external content from the main page.

Limitations:

  1. Some CSS properties can still penetrate the shadow boundary (e.g., font-family).
  2. JavaScript events can still bubble up from the shadow DOM to the light DOM.

The Shadow DOM is a powerful tool for creating encapsulated, reusable components in web development. It’s particularly useful when building complex applications or libraries of UI components.

Would you like me to elaborate on any specific aspect of the Shadow DOM?

HTML5 Web Components

Section titled “HTML5 Web Components”

HTML5 Web Components provide a set of standardized APIs that allow developers to create reusable, encapsulated, and composable UI elements. They help to modularize web applications, making them easier to maintain and extend.

Introduction to Web Components

Section titled “Introduction to Web Components”

Overview and Benefits of Web Components:

Web Components consist of four main specifications:

  1. Custom Elements: Define new HTML elements.
  2. Shadow DOM: Encapsulate styles and scripts within a component.
  3. HTML Templates: Define HTML fragments that can be reused.
  4. HTML Imports: Import HTML documents into other documents (Note: HTML Imports are deprecated and not widely supported).

Benefits of Web Components:

  1. Reusability: Create components that can be reused across different projects.
  2. Encapsulation: Isolate the internal structure and styling of components, preventing conflicts.
  3. Maintainability: Modular code is easier to maintain and update.
  4. Interoperability: Web Components can work with any framework or library.

Custom Elements

Section titled “Custom Elements”

Creating and Using Custom HTML Elements:

Custom elements allow you to define your own HTML tags, which can encapsulate functionality and presentation.

  1. Define a Custom Element: Create a class that extends HTMLElement and define lifecycle callbacks.
class MyElement extends HTMLElement {
  constructor() {
    super();
    // Element's initial setup goes here
  }


  connectedCallback() {
    this.innerHTML = "<p>Hello, World!</p>";
  }


  disconnectedCallback() {
    // Cleanup when element is removed from the DOM
  }
}


// Define the new element
customElements.define('my-element', MyElement);
  1. Use the Custom Element in HTML:
<my-element></my-element>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Elements Example</title>
</head>
<body>
  <my-element></my-element>


  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = "<style>p { color: blue; }</style><p>Hello, World!</p>";
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

Shadow DOM

Section titled “Shadow DOM”

Encapsulating Styles and Scripts:

The Shadow DOM allows you to create a scoped subtree of DOM elements and styles, which is isolated from the rest of the document.

  1. Attach Shadow DOM:
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: blue; }
      </style>
      <p>Hello, Shadow DOM!</p>
    `;
  }
}
customElements.define('my-element', MyElement);
  1. Use the Shadow DOM in HTML:
<my-element></my-element>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow DOM Example</title>
</head>
<body>
  <my-element></my-element>


  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
          <style>
            p { color: blue; }
          </style>
          <p>Hello, Shadow DOM!</p>
        `;
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

HTML Templates

Section titled “HTML Templates”

Using Templates for Reusable Content:

HTML templates allow you to define reusable HTML fragments that can be cloned and inserted into the document.

  1. Define a Template:
<template id="my-template">
  <style>
    p { color: red; }
  </style>
  <p>Hello from template!</p>
</template>
  1. Use the Template in JavaScript:
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('my-template').content.cloneNode(true);
    shadow.appendChild(template);
  }
}
customElements.define('my-element', MyElement);
  1. Use the Custom Element in HTML:
<my-element></my-element>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Templates Example</title>
</head>
<body>
  <template id="my-template">
    <style>
      p { color: red; }
    </style>
    <p>Hello from template!</p>
  </template>


  <my-element></my-element>


  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const template = document.getElementById('my-template').content.cloneNode(true);
        shadow.appendChild(template);
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

By understanding and utilizing Web Components, including custom elements, the Shadow DOM, and HTML templates, you can create modular, reusable, and encapsulated components for your web applications. This approach helps improve code maintainability, reusability, and separation of concerns.