Platform under construction

Web Components & Accessibility

Advanced

Shadow DOM

Shadow DOM gives a component an internal DOM tree with scoped structure and styling.

class InfoCard extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = `<style>strong{color:#f7df1e}</style><strong>Ready</strong>`;
  }
}

Web Components & Accessibility

Shadow DOM belong to usable component design.

Shadow DOM gives a component an internal DOM tree with scoped structure and styling.

A component should hide repetition without hiding meaning. Start with semantic HTML, then add the browser feature that solves the real problem.

The professional version is not only that the component works. It must remain accessible, testable, maintainable and understandable in production.

Core API

attachShadow()

Meaning first

Use the right HTML before adding custom behavior.

User input

Keyboard, focus and assistive technology need deliberate support.

Production habit

Clean up listeners and keep component boundaries clear.

Examples

Good component code keeps meaning visible.

Use the browser feature with semantic intent

class InfoCard extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = `<style>strong{color:#f7df1e}</style><strong>Ready</strong>`;
  }
}

Hide meaning behind JavaScript

document.body.innerHTML += "<style>strong{color:red}</style>";
// Global styles leak into unrelated UI.

Code patterns

Reusable examples for quick reference.

Use these examples as a quick reference when building reusable browser UI.

Basic pattern

A compact example of the feature in context.

class InfoCard extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = `<style>strong{color:#f7df1e}</style><strong>Ready</strong>`;
  }
}

Weak pattern

A common shortcut that creates maintenance or accessibility problems.

document.body.innerHTML += "<style>strong{color:red}</style>";
// Global styles leak into unrelated UI.

Feature check

Check support before depending on advanced browser features.

if ("customElements" in window) {
  // Register or enhance the component.
}

Accessible update

Dynamic UI should communicate state changes clearly.

const status = document.querySelector("[aria-live]");
status.textContent = "Interface updated.";

Rules that matter

Accessible components need rules, not luck.

Web Components can be powerful, but the browser does not automatically make custom UI accessible.

Start from working HTML

The page should have meaning before JavaScript upgrades it.

Use native controls when possible

Buttons, links and form controls already handle many accessibility details.

Manage focus deliberately

Dynamic interfaces should not trap or lose keyboard users.

Clean up side effects

Remove listeners and timers when components leave the page.

Keep styling boundaries clear

Shadow DOM can help, but it should not make the UI impossible to theme.

Test without a mouse

Keyboard testing catches real usability problems quickly.

Production thinking

Ship components that survive reuse.

Why does this matter?

Component code often gets reused everywhere. If the foundation is inaccessible, the problem spreads everywhere too.

Accessibility

This chapter is accessibility-heavy on purpose: reusable UI has to work for keyboard users, screen readers and dynamic content updates.

Production note

Production components need documented APIs, predictable lifecycle behavior, cleanup and browser-support decisions.

SEO note

Important content should not be locked inside client-only behavior that search engines or no-JavaScript users cannot reach.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the visible text and run the example again.
Explain which part is plain HTML and which part is JavaScript enhancement.
Test the example using only the keyboard where possible.

Practice assignment

Do this before moving to the next topic.

Write the simplest semantic HTML version first.
Add the JavaScript behavior in a small, named block.
Add one accessibility check before calling the component finished.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Shadow DOM.