Fundamentals of Web Components

Create reusable web components with custom elements, starting from a basic button and adding a progress indicator, delay, and disabled states, then style and animate for better user feedback.

Convert duplicate login and register button logic into a reusable custom element, manage text, disabled state, and classes via an in-progress attribute with observed attribute callbacks.

Explore the lifecycle of custom elements, including constructor, connected callback, disconnected callback, attribute change callback, and adopted callback, with hands-on examples of creating, updating, and moving web components.

Learn how custom web components synchronize attributes and properties, using disabled and in progress, and reflect state changes through setters, getters, and observed attributes to update behavior and styling.

Extend the built-in button in a web component by replacing the element and using a third parameter object, with text as content for the outer button.

Explore polyfills that extend built-in button and enable custom elements in web components across browsers; learn about Safari limitations, browser support checks, and integrating polyfills without breaking functionality.

Extract elements from the index to separate JavaScript files, create button.js and counter.js with script tags, and move the button styles into a dedicated style block for reuse.

Master using the template element to extract and reuse button markup in web components, clone template content deeply, and update button text dynamically for multiple instances.

Build and integrate a stopwatch as a custom element using web components, define start and reset behavior, and manage imports with module scripts in index.html.

Demonstrates how shadow dom encapsulates a web component, preventing style leakage and class-name conflicts with bootstrap. Shows how to access and manipulate inside the open shadow root.

Examine open and closed shadow dom modes, showing how closed hides the shadow root from JavaScript and how open preserves access, including attaching and referencing the shadow root.

Master using slots in web components to compose custom elements with shadow DOM, replacing text attributes with slot content, supporting named slots and fallback content for flexible layouts.

Learn how moving styles into a css file can cause a flash of unstyled content. Explore how templates, shadow dom, and bootstrap affect styling in web components.

Delay the definition of custom elements to explore how undefined elements affect layout, and use the defined and not defined pseudo-classes to control visibility.

Set styles for a custom element and its button using the host selector, including display and transform rules. Explore how outside styles may override component styling with a shadow root.

Explore how slot elements inject content into a component while the shadow DOM keeps styles isolated. Slotted content lives in the light DOM, and styles apply only to top-level elements.

Learn to style web components using parts and CSS custom properties, with Shadow DOM encapsulation, to override colors and layout, and enable light and dark theming, with dynamic theme switching.

Create a custom input element with web components by defining a template, attaching a shadow dom, and cloning its content; bind a label attribute and style the input.

Learn how input events propagate in web components, including shadow dom, event retargeting, and custom app input events with bubbles, composed, and detail for values.

Learn to handle button clicks inside a custom element by stopping propagation, dispatching a custom event with bubbles and composed, and listening outside to process it.

Enhance a registration form by updating a custom input to display real-time validation feedback, including help text, dynamic styling for invalid and valid states, and synchronized attributes.

Explore building a custom registration form with web components, cards and slots, including input handling, password masking, validation, and simulated backend interactions.