Ashadow tree is a hidden set ofDOM nodes whose topmostnode is ashadow root. The shadow root is the topmost node of ashadow DOM and not part of the regular document's DOM tree.

The shadow root is attached to another node tree through a specific DOM node referred to as itshost. This host may be part of another shadow tree or part of the regular DOM tree. The node tree of a shadow root's host is sometimes referred to as thelight tree.

The hidden DOM nodes of a shadow tree are generally not affected by anything applied outside the shadow tree, and vice versa. Theshadow boundary, where the shadow DOM ends and the regular DOM begins, can be traversed, but only very intentionally:

• Scripting shadow tree nodes from outside requires the use of a specialShadow DOM API to be accessed.
• Styling a shadow tree from outside can be achieved viaCSS scoping andCSS shadow parts.

See also

• Using shadow DOM
• Element.shadowRoot andElement.attachShadow()
• ShadowRoot
• <slot>
• CSS shadow parts module
• CSS scoping module
• Related glossary terms:
  • Accessibility tree