CSS &amp; Design Systems

CustomEvent: Sending Custom Data with Events

CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the detail property. Don't forget detail!

Shadow DOM: A Private Bubble for Your Components

Shadow DOM gives a component a private bubble, keeping its styles and structure isolated from the main page. This is key for building reusable Web Components and microfrontends.

CSS :host: Style a Web Component from Within

The :host pseudo-class lets a web component style itself from the inside out. Use it inside a shadow DOM to apply styles to the host custom element, making components self-contained. The key footgun: it only works inside a shadow DOM; it has no effect in.

::slotted(): Style Content Passed into Web Components

The ::slotted() pseudo-element lets a Web Component style external content passed into its slots. It's how a component's internal CSS can style the "light DOM" elements it receives.

CSS ::part(): Style Inside a Web Component's Shadow DOM

The ::part() pseudo-element lets you style specific elements inside a web component's Shadow DOM. It's a contract allowing consumers to theme designated "parts" of a component without breaking encapsulation. The main footgun: it only styles one level deep.

Storybook: A Workshop for UI Components

Storybook is a workshop for UI components, letting you build and test them in isolation without running your entire app. It's used to develop component libraries, document design systems, and test hard-to-reach states.

Form-Associated Custom Elements: Your Own Inputs

Make your custom elements behave like native inputs within a <form>. This lets them carry a value, be validated, and submit with the form. Use it for custom widgets like tag inputs. The footgun: its state won't submit if you don't call setFormValue().

Constructable Stylesheets: Share Styles, Not Bloat

Create and share CSS in JavaScript without duplication. Constructable Stylesheets are ideal for theming multiple Shadow DOM components from a single source; updates to the sheet propagate to all consumers. A key footgun: @import rules are ignored.

ElementInternals: Making Custom Elements Form-Friendly

ElementInternals lets your custom elements act like native form inputs, integrating with validation, submission, and labels. Use it for custom inputs in a design system. The footgun: forgetting to call setFormValue() means its state won't be submitted.

Semantic HTML: Describe Meaning, Not Just Looks

Semantic HTML uses tags that describe the content's role (e.g., <article>), not just its appearance. This helps screen readers and search engines understand your page, improving accessibility and SEO. The footgun is using <div> for everything.

Build Accessible Animations with `prefers-reduced-motion`

prefers-reduced-motion lets you respect a user's system-wide request to minimize animations. Use this CSS media query to replace potentially jarring effects like zooms or parallax with simpler fades, preventing discomfort for users with vestibular disorders.

tabindex: Control Element Focus and Tab Order

The tabindex attribute lets you control an element's keyboard focus. Use tabindex="0" to make custom components tabbable in document order, or tabindex="-1" to make an element focusable only by script, like for a modal.

WAI-ARIA Roles: Semantics for Custom Components

WAI-ARIA roles are job titles for HTML elements, telling assistive tech what a generic <div> is meant to be, like a tab or button. Use them for custom UI components that lack a native HTML equivalent.

Accessible Name Computation: The UI Naming Algorithm

Browsers follow a strict algorithm to find a name for UI elements to announce to screen readers. It runs on every interactive element, creating the data source for assistive tech.

CSS :focus-visible: Smart Focus for Accessibility

:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.

WAI-ARIA Authoring Practices: The Cookbook for Accessible Components

Think of WAI-ARIA Authoring Practices as the official cookbook for accessible web components. It provides patterns for widgets like tabs or accordions, ensuring they work with assistive tech.

ARIA Live Regions: Announcing Dynamic Content

ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use aria-live="polite" for most updates and assertive only for critical alerts.

Focus Trapping: Guiding Keyboard Users, Not Caging Them

Focus trapping intentionally confines keyboard navigation to a component, like a modal. It's a feature, not a bug, when used to prevent users from interacting with the page behind an overlay.

The Accessibility Tree: The DOM for Assistive Tech

The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.