Shadow DOM

Shadow DOM is a browser feature that allows websites to define self-contained HTML elements on the website. These self-contained elements, called shadow trees, allow website developers to bundle together related HTML markup and CSS styling in a manner such that the styling and code does not affect other surrounding elements. This solves a recurring problem that web developers face of unintended interference between components, where CSS rules written for one part of a page can accidentally affect unrelated parts of the website.

The shadow DOM feature originated as part of the Web Components initiative by Google alongside other proposals like Custom Elements and the HTML template element in 2013. After criticism from Apple and Mozilla on the first version of the Shadow DOM proposal, called the "v0" design, a new proposal called the "v1" design was published and was subsequently adopted by all major web browsers.