LWC Enhancement in Salesforce Winter ’23

Lightning Web Components are used to create user interfaces for custom component requests. This post will explain the LWC enhancement in Salesforce Winter’23.

1. Enable Third-Party Integrations with Light DOM

Light DOM allows third-party tools to traverse the DOM, enabling standard browser query APIs like querySelector and querySelectorAll, without traversing the shadow root. It also facilitates global styling so we can apply custom branding to our components and child components easily.

Earlier shadow DOM posed challenges for global styling and third-party integrations. This issue is handled using Light DOM. Check out other blogs related to Light DOM capabilities.

To enable a component to render in light DOM, set the renderMode static field in component class.

import { LightningElement } from 'lwc';

export default class LightDomApp extends LightningElement {
    static renderMode = 'light'; // the default is 'shadow'
}

Use the lwc:render-mode template directive on the <template> tag of component.

<template lwc:render-mode='light'>
    <my-header>
        <p>Hello World</p>
    </my-header>
</template>

2. Fix Invalid HTML Syntax to Avoid Component Loading Errors

Currently, components are loaded without returning a warning when LWC has invalid HTML syntax. Now we will get Invalid HTML syntax in LWC markup, resulting in a runtime error.

LWC flags invalid markup, such as a missing closing tag or an extra closing tag. For example, remove the extra </template> tag in this component example to prevent runtime errors.

<template>
    <div>Hello</div>
    </template> 
</template><!-- Remove extra closing tag -->

3. Remove Non-Global Design Tokens in CSS

Only design tokens labeled as Global Access (GA) are supported in Lightning web components’ CSS. Non-global design tokens no longer work after Spring ’23.

Ensure that our Lightning web components are using design tokens with global support only.

For example, this usage of the non-global --lwc-heightInput token isn’t allowed and returns the error No TOKEN named force:base.heightInput found.

/* This non-global token usage doesn't work */
div { 
    height: var(--lwc-heightInput); 
}

/* This doesn't work after Spring '23 */
.resultcontainer{    
    height: calc(var(--lwc-height-header) - (var(--lwc-heightInput)));
}

Replace the non-global tokens in CSS with a global token or use a custom Aura design token instead.

div {
    height: var(--lwc-lineHeightText); /* use a global design token */
}

.resultcontainer {    
    height: calc(var(--lwc-height-header) - (var(--lwc-lineHeightText)));
}

4. Page Refresh by Using RefreshView API (Pilot)

The new lightning/refresh module and RefreshView API provide a standard way to refresh component data in LWC and Aura. RefreshView API updates the data for a specific hierarchy of components, known as a view, without reloading an entire page. This refresh ensures complete synchronization with data externally sourced by components in that view. RefreshView API can refresh data for Salesforce platform containers and custom components.

Previously, LWC lacked a data refresh API, and Aura only supported the legacy force:refreshView , which doesn’t meet the requirements of modern web development.

5. Lightning Web Security by Default in New Salesforce Orgs

Lightning Web Security is enabled by default in new Salesforce Orgs. Lightning Web Security is replacing Lightning Locker for Lightning web components. Lightning Locker still supports Aura components and replaced with Lightning Web Security later.

The setting Use Lightning Web Security for Lightning web components is located in Session Settings in Setup.

6. Access iframe Content in Lightning Web Security

Lightning Web Security now permits Lightning web components to access content in iframe elements. With this change, we can use another web development feature that Lightning Locker blocks.

7. Build Components in Mixed Shadow Mode (Beta)

With mixed shadow mode, Lightning web components can use native shadow DOM. Mixed shadow mode is disabled by default. Contact Salesforce Customer Support to enable mixed shadow mode.

To enable mixed shadow mode on a component, set the static shadowSupportMode property to any.

// native.js
import { LightningElement } from 'lwc';

export default class NativeComponent extends LightningElement {
    static shadowSupportMode = 'any';
}  

8. Block Access to Public Apex Constructor in Managed Package

This update enforces that an Apex class in a managed package must have a global constructor to be instantiated from an @AuraEnabled method in a subscriber org.

References:

Salesforce Winter’23 Release Update

Similar Post:

Salesforce Flow Update in Salesforce Winter ’23