DOM Access Containment

A component can only traverse the DOM and access elements created by a component in the same namespace. This behavior prevents the anti-pattern of reaching into DOM elements owned by components in another namespace.

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.

Note

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

1<!--c:domLocker-->
2<aura:component>
3    <div id="myDiv" aura:id="div1">
4        <p>See how Lightning Locker restricts DOM access</p>
5    </div>
6    <lightning:button name="myButton" label="Peek in DOM"
7                aura:id="button1" onclick="{!c.peekInDom}"/>
8</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.

1({ /* domLockerController.js */
2    peekInDom : function(cmp, event, helper) {
3        console.log("cmp.getElements(): ", cmp.getElements());
4        // access the DOM in c:domLocker
5        console.log("div1: ", cmp.find("div1").getElement());
6        console.log("button1: ", cmp.find("button1"));
7        console.log("button name: ", event.getSource().get("v.name"));
8
9        // returns an error
10        //console.log("button1 element: ", cmp.find("button1").getElement());
11    }
12})

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’ll see an error:

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

Lightning Aura Components Developer Guide

DOM Access Containment

Valid DOM Access

Invalid DOM Access

See Also