Lightning Web Component

Salesforce Lightning Locker

Lightning Locker or Locker Service is a security architecture that provides a set of features and mechanisms to enforce the security and integrity on Lightning Components in Salesforce.

It was included to do not let the users break the security rules on the Lightning Component context. It also supports best practices to improve the communication between external APIs.

Salesforce Lightning Locker

Importance of Lightning Locker

Here is a list of the key features of the Locker Service in Salesforce, this is why it is important to know:

Lightning Locker Example

Let's see an example of what the Lightning Locker prevents you to do with the DOM:

This is an input from a Lightning Web Component: c-coding-componentv2 which contains data that the user typed:

Lightning Locker examples of you can not do on Lightning Components

And here is another Lightning Web Component called: c-coding-component which is trying to access to the DOM of the previous component. Lightning Locker will prevent you from get the data on that input from c-coding-componentv2.

import { LightningElement } from 'lwc';

export default class CodingComponent extends LightningElement {
        console.log(document.querySelector('[data-input="search"]')); // NULL, BLOCKED BY LIGHTNING LOCKER
        console.log(this.template.querySelector('[data-input="search"]')); // NULL, BLOCKED BY LIGHTNING LOCKER

Difference between: Lightning Locker and Lightning Web Security

Lightning Locker

The Lightning Locker it is a security architecture between different Lightning Components(Aura and LWC) on the same DOM. It ensures that the components do not communicate between each other to force the developer to handle the logic and UI on different components since it is a best practice to separate the purpose of each Lightning Component.

Lightning Web Security

The Lightning Web Security (LWS) is another architecture for Lightning Components, it was created to replace the Lightning Locker since enables to use code safely from external sites without having vulnerabilities such as corss-site XSS attacks. This new model uses the same security practices from Lighting Locker so you will not have to refactor any of your previous lightning components.

Enable and Disable Lighting Locker

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
    <apiVersion>40.0</apiVersion> <!-- ENABLED -->
    <apiVersion>39.0</apiVersion> <!-- DISABLED -->