Shadow DOM Courses and Certifications

Kevin Powell

Breaking Through the ShadowDOM with Style Queries

Discover how to overcome ShadowDOM styling limitations using CSS style queries, custom properties, and advanced layout techniques for web components.

• YouTube
• 14 minutes
• Self-Paced
• Free Video

Web Conferences Amsterdam

Shining Light on the Shadow DOM - Styling Web Components

Explore styling Web Components, focusing on Shadow DOM, encapsulation, and CSS techniques. Learn to build consistent design libraries and navigate browser inconsistencies.

• YouTube
• 51 minutes
• Self-Paced
• Free Video

NDC Conferences

I Don't Need No Stinkin' Framework - Mastering Shadow DOM

Master Shadow DOM to create reusable, framework-agnostic components using only HTML and JavaScript. Learn to build, style, and implement custom elements for cross-project compatibility and efficiency.

• YouTube
• 42 minutes
• Self-Paced
• Conference Talk

Drupal Association

Declarative Shadow DOM and the Future of Drupal Theming

Explore how Declarative Shadow DOM revolutionizes Drupal theming by combining server-side rendering with modern web components using only HTML and CSS.

• YouTube
• 52 minutes
• Self-Paced
• Free Video

Mukesh otwani

Handling Shadow DOM and Shadow Root in Playwright with Java

Master shadow DOM handling in Playwright with practical examples and techniques for accessing shadow root elements and interacting with web components effectively.

• YouTube
• 13 minutes
• Self-Paced
• Free Video

Drupal Association

Declarative Shadow DOM and the Future of Drupal Theming

Explore how Declarative Shadow DOM and Single Directory Components can modernize Drupal's theming system by bridging server-side rendering with contemporary JavaScript APIs.

• YouTube
• 48 minutes
• Self-Paced
• Free Video

Web Components & Stencil.js - Build Custom HTML Elements

3907 ratings at Udemy

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS

• Udemy
• 8 hours 49 minutes
• Self-Paced
• Paid Course

Web Components

Create custom, reusable HTML elements with the Web Components API! Learn to create custom Web Components using JavaScript and the Lit library.

• Frontend Masters
• 4-5 hours
• Self-Paced
• Paid Course

Web Components

Build reusable custom elements: render them with class methods and custom events, structure markup with HTML templates and slots, and encapsulate styles using Shadow DOM and part.

• egghead.io
• 18 minutes
• Self-Paced
• Free Online Course

Kevin Powell

Simple Details and Summary Animation with Pure CSS

Master modern CSS techniques to create smooth animations for details/summary elements, exploring interpolate-size and pseudo-elements for enhanced user interactions.

• YouTube
• 13 minutes
• Self-Paced
• Free Video

Kevin Powell

How to Use Web Components and Why You'd Want To

Discover how to implement and customize Web Components for better form handling, styling error messages, and creating reusable UI elements in your web projects.

• YouTube
• 39 minutes
• Self-Paced
• Free Video

Jeremy Chone

Native Web Components - Best Practices for Framework-Free Application Development

Discover best practices for building scalable web applications using native web components without frameworks or virtual DOM in 55 minutes.

• YouTube
• 55 minutes
• Self-Paced
• Free Video

WeAreDevelopers

Extending HTML with Web Components

Learn to create reusable, encapsulated custom HTML elements using Web Components, enhancing web development flexibility and modularity.

• YouTube
• 42 minutes
• Self-Paced
• Conference Talk

Kevin Powell

Turning a Common UI Pattern into a Web Component

Master creating reusable Web Components by transforming common UI patterns into custom elements with Shadow DOM, validation logic, and advanced styling techniques.

• YouTube
• 1 hour 13 minutes
• Self-Paced
• Free Video

GOTO Conferences

Vanilla Web: You Don't Need that Library - Modern Web Development with Pure JavaScript

Discover how to build powerful web applications using pure JavaScript, browser APIs, and modern techniques without dependencies. Learn about Web Components, Shadow DOM, reactivity, and server-side architectures.

• YouTube
• 42 minutes
• Self-Paced
• Free Video