Skip to content
Frontend Architecture Patterns

Web Components Composition

Web Components use standard browser APIs to create encapsulated components that can be used across any framework or none at all.

Core Technologies

Section titled “Core Technologies”
  • Custom Elements: Defining new HTML tags.
  • Shadow DOM: Encapsulated styles and DOM structure.
  • Slots: Composing children into specific locations in the component template.
  • HTML Templates: Efficient reusable markup.

When it works well

Section titled “When it works well”
  • Framework-agnostic Design Systems: Building a UI library for a large company with diverse tech stacks.
  • Interoperability: Using the same component in a React app, a Vue app, and a legacy CMS.

When it becomes problematic

Section titled “When it becomes problematic”
  • Styling Barriers: Shadow DOM encapsulation makes it difficult for consumers to style internal parts of the component.
  • SSR Complexity: Requires Declarative Shadow DOM for server-side rendering support.
  • Framework Quirks: React (before v19) had issues with custom element events and property passing.
  • Form Integration: Requires extra effort (ElementInternals) to participate in native <form> behavior.

Technical Complexity

Section titled “Technical Complexity”

Medium. Usually implemented with helper libraries like Lit to reduce verbosity.

Section titled “Related Patterns”