ApexSensei

Introduction

A Lightning web component is a standard web component on Salesforce, guarded by Lightning Web Security, using shadow DOM unless you opt into light DOM.

Standard web components

A Lightning web component is a custom HTML element. You write HTML and JavaScript, and the platform hosts that element on a Lightning page.

Salesforce keeps the framework small. Most of what you write is the same HTML and JavaScript a browser already runs. The Lightning Web Components Developer Guide is the reference for the rest.

Lightning Web Security

Write for Lightning Web Security. It is generally available, and it is the default for orgs created in Winter '23 and later. Each namespace runs in its own JavaScript sandbox.

Lightning Locker is the older architecture. New components should follow Lightning Web Security, including when an older org still has Locker turned on.

Shadow DOM, then light DOM

Shadow DOM is the default. The component's markup and styles stay inside the component, so a parent stylesheet does not restyle the inside by accident.

Opt into light DOM only when a parent must style the component, or when a library must read its markup. Set static renderMode = 'light' on the class and lwc:render-mode="light" on the template root. Both are required. The default renderMode is shadow.

Light DOM removes that wall, so leave private data in a shadow component. A light DOM component at the top of the tree is outside Lightning Web Security. Nest it inside a shadow DOM parent.

Example

javascript

import { LightningElement } from 'lwc';

export default class BrandCard extends LightningElement {
  static renderMode = 'light';
}