Shadow DOM

Definitions

1. A browser API that creates an encapsulated DOM subtree with its own scope for CSS and JavaScript. Styles inside the shadow DOM don't leak out, and external styles don't leak in. The foundation of Web Components, enabling truly reusable UI elements that don't conflict with the host page's styles.

   In plain English: A way to create a self-contained piece of a web page whose styles and scripts are completely isolated from the rest of the page.

   Example: "The embed widget uses Shadow DOM so its styles can't be broken by the host site's CSS — complete encapsulation."

Related Terms

• DOM
• Inspector
• WebRTC
• Web Worker
• Service Worker
• Intersection Observer
• Local Storage
• IndexedDB
• Tell Don't Ask