# DOM Access Containment

A Lightning 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.

:::tip
It’s an anti-pattern for any component to “reach into” another component, regardless of namespace, because it breaks encapsulation. Lightning Locker only prevents cross-namespace access. Your good judgment should prevent cross-component access within your own namespace as it makes components tightly coupled and more likely to break.
:::

## DOM Access Containment with Lightning Web Components (LWC)

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.

:::note
If your org has [Lightning Web Security (LWS)](/docs/platform/lightning-components-security/guide/lws-intro.md) enabled instead of Lightning Locker, component access to the DOM is controlled by the browser through Shadow DOM, which is a web standard implemented in web browsers. Inside a component’s sandbox, LWS abides by the developer’s intent for the `shadowRoot`. An open mode `shadowRoot` allows JavaScript in the same sandbox to access and manipulate the Shadow DOM. A closed mode keeps internal elements inaccessible, even within the sandbox, preserving encapsulation. LWS makes `shadowRoot` appear closed to code running outside a component's sandbox. See [ShadowRoot.mode](https://developer.mozilla.org/en-US/docs/Web/API/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.
:::

## DOM Access Containment with Aura Components

Let’s look at a sample component that demonstrates DOM containment.

```
<!--c:domLocker-->
<aura:component>
    <div id="myDiv" aura:id="div1">
        <p>See how Lightning Locker restricts DOM access</p>
    </div>
    <lightning:button name="myButton" label="Peek in DOM"
                aura:id="button1" onclick="{!c.peekInDom}"/>
</aura:component>
```

The `c:domLocker` component creates a `<div>` element and a `lightning:button` component.

Here’s the client-side controller that peeks around in the DOM.

```javascript
({
  /* domLockerController.js */
  peekInDom: function (cmp, event, helper) {
    console.log("cmp.getElements(): ", cmp.getElements());
    // access the DOM in c:domLocker
    console.log("div1: ", cmp.find("div1").getElement());
    console.log("button1: ", cmp.find("button1"));
    console.log("button name: ", event.getSource().get("v.name"));

    // returns an error only with Locker, but not with Lightning Web Security
    //console.log("button1 element: ", cmp.find("button1").getElement());
  },
});
```

### Valid DOM Access

The following methods are valid DOM access because the elements are created by `c:domLocker`.

- `cmp.getElements()`
  \:- Returns the elements in the DOM rendered by the component.
- `cmp.find()`
  \:- Returns the div and button components, identified by their aura:id attributes.
- `cmp.find("div1").getElement()`
  \:- Returns the DOM element for the div as c:domLocker created the div.
- `event.getSource().get("v.name")`
  \:- Returns the name of the button that dispatched the event; in this case, myButton.

### Invalid DOM Access

You can’t use `cmp.find("button1").getElement()` to access the DOM element created by `lightning:button`. Lightning Locker doesn’t allow `c:domLocker` to access the DOM for `lightning:button` because the button is in the `lightning` namespace and `c:domLocker` is in the `c` namespace.

If you uncomment the code for `cmp.find("button1").getElement()`, you see an error:

```
c:domLocker$controller$peekInDom [cmp.find(...).getElement is not a function]
```

This code doesn’t return an error if your org has LWS enabled instead because cross-namespace component use is allowed with LWS. See [How Lightning Web Security Compares to Lightning Locker](/docs/platform/lightning-components-security/guide/get-started-compare-lws-locker.md).

**See Also**

- [querySelector APIs Running with Lightning Locker](/docs/platform/lightning-components-security/guide/locker-queryselector.md)
- [*Lightning Web Components Developer Guide*: Access Elements the Component Owns](/docs/platform/lwc/guide/create-components-dom-work.md)
- [*Lightning Web Components Developer Guide*: Use Third-Party JavaScript Libraries](/docs/platform/lwc/guide/js-third-party-library.md)
- [*Lightning Aura Components Developer Guide*: Using JavaScript](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_intro.htm)