Glossary
DOM
The DOM (Document Object Model) is a programming interface for web documents. It represents the page structure as a tree of objects, where each node corresponds to an HTML element. JavaScript and web frameworks use the DOM to dynamically access and manipulate the content, structure, and styling of web pages.
Shadow DOM
Shadow DOM is a web standard that allows encapsulation of the DOM (Document Object Model) and CSS within a specific element, known as the shadow tree. This isolated DOM and CSS are separate from the main document DOM, effectively creating a scoped boundary for the component. Shadow DOM helps to create self-contained, reusable web components that can be added to a webpage without worrying about conflicts with other styles and scripts on the page.
It also introduces features like shadow parts and slots that allow developers to expose certain parts of the shadow tree for customization by the parent page. This provides a flexible way to pass content into the component and customize its appearance while maintaining encapsulation.