DOM Access Containment

A component can only traverse the DOM and access elements that it created. This behavior prevents the anti-pattern of reaching into DOM elements owned by other components.

Lightning web components can’t use the window or document global properties to query for DOM elements when Lightning Locker is enabled. For example, use this.template.querySelector() instead of document.querySelector(). The document.querySelector() method isn’t supported for Shadow DOM.

With Lightning Web Security (LWS), component access to the DOM is controlled by the browser through Shadow DOM, which is a web standard implemented in web browsers. LWS enforces a closed shadowRoot by requiring mode to be closed, which provides additional encapsulation restrictions. See ShadowRoot.mode in MDN.

Although we don’t recommend using window and document global properties directly, LWS permits access to those properties within an LWC component and its parent hierarchy.

See Also