The Shadow DOM

The Shadow DOM is a web standard that allows developers to encapsulate a fragment of DOM and CSS styles, creating a separate and isolated scope for a component. This means that styles defined within the shadow DOM do not affect the main document and vice versa, which helps in avoiding style conflicts and enhances modularity in web development. This also applies to functionality, as scripts operating on elements outside of the shadow DOM will not directly affect elements within it.

A shadow DOM fragment can be attached to any HTML element, but it is most useful for custom elements. To attach a shadow DOM to an element, call the attachShadow method on the element to create a new root.

Of course, a web component doesn't need to attach a shadow DOM and only needs to do so for isolation from the surrounding DOM. For example, a navigation component may not want to prevent its anchor elements from being styled with the rest of the document. This is as simple as adding anchor elements into the custom element and not attaching a shadowDOM.