Web components
19 moments from 15 videos · 1:06:39 total
Software engineers can explore specialized insights on component encapsulation, browser standards, and the practice of building framework-free reusable components.
Building a framework-agnostic design system with web components
Achieving a consistent user interface across diverse application teams requires a framework-agnostic web component library.
Understanding standard technologies behind web component architecture
Utilizing browser standards like custom elements and shadow DOM prevents vendor lock-in across implementation frameworks.
Resolving default accessibility limitations in custom web components
Unrecognized custom elements require explicit ARIA attributes and design patterns to function correctly with assistive technologies.
What are web components and custom elements
Custom elements extend standard browser elements through dedicated JavaScript classes defining native-like behaviors.
Building isolated UI elements using standard web components
An overview of how web components encapsulate HTML templates, custom elements, and styling.
Leveraging web components for independent UI elements
Standardized shadow DOMs and slots securely encapsulate business logic and styling inside reusable web components.
Abstracting framework implementations behind native web components
Wrapping single-page applications inside native web components standardizes their bootstrapping and teardown processes within the shell.
Summary of web components and module federation capabilities
Combining standard web components with module federation provides a robust mechanism for integrating diverse technological stacks.
The role of web components in modern web development
Native web components provide an interoperable layer without the heavy architectural opinions imposed by large frameworks.
Authoring native web components directly in the browser
Opting for native web components rather than framework-specific compilers ensures universally compatible custom view elements.
Introduction to web components and their basic structure
An overview of web components without frameworks and their three main foundational parts.
Integrating web components across popular javascript frameworks
Embedding custom elements consistently inside Vue, Angular, React, and Svelte applications without rewriting code.
Mixing framework versions using web components and federation
Combining web components with module federation allows developers to mix incompatible frameworks safely inside a single browser window.
Implementing client-side composition and dynamic web components
Client-side composition combines independent scripts and custom elements directly in the browser.
Abstracting web UI complexity with Vaadin Java components
Encapsulating complex frontend details inside dynamic runtime Java APIs reduces developer friction.
Designing a custom web component natively extending content editing
Creating an backward-compatible replacement that wraps the browser API while enabling custom text attachments.
Building framework-less architectures with native custom web components
Leveraging the lit library creates lightweight, interoperable custom HTML elements without relying on heavy frontend frameworks.
Evaluating Angular trade-offs and the web components alternative
Angular's size and complexity create vendor lock-in, making simpler, framework-agnostic web components an appealing alternative.
Choosing native HTML elements over custom components
The practical trade-offs between under-engineered native web components and over-engineered custom solutions.
Your mix. Instantly.
More mixes
AI & Machine Learning
AI coding agents
AI & Machine Learning
MCP (Model Context Protocol)
AI & Machine Learning
RAG
Languages & Frameworks
TypeScript
Languages & Frameworks
React
Languages & Frameworks
Java
Cloud, Platform & Data
Platform engineering
Cloud, Platform & Data
Observability
Cloud, Platform & Data
Infrastructure as code
Architecture, Quality & Security
System architecture
Architecture, Quality & Security
Code review
Architecture, Quality & Security
Software supply chain security
Leadership, Career & Community
Engineering strategy
Leadership, Career & Community
Developer experience
Leadership, Career & Community