Top 5 Lightning Web Component Gems of Salesforce Winter’23 Release!

Top 5 Lightning Web Component Gems of Salesforce Winter’23 Release!

Last Updated on September 10, 2022 by Rakesh Gupta

The Lightning Component modern framework is a User Interface framework to develop dynamic web apps for mobile and desktop devices. As is the case with each release, the latest Winter’23 release is packed with rich features, including the newly added Lightning Component features! 

Currently, the Winter’23 release is under the pre-release program. If you have not read the 577 pages of Salesforce Winter’23 release notes, check out the Winter’23 release quick summary and Top 10 Gems of Salesforce Lightning Experience Written by me.

I combed through the release notes and highlighted the added capabilities to the Lightning Web Component features. Believe me; it was hard to stop at just five! To kick things off, here is my take on the coolest Lightning Web Component features from the Winter’23 release.  

  1. Synchronize Component Data Without a Page Refresh by Using RefreshView API (Pilot):- Whether user-driven or app-invoked, the ability to synchronize data without reloading an entire page is a key user experience requirement. The new lightning/refresh module and RefreshView API provide a standard way to refresh component data in LWC and Aura. 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. 
    1. 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.
  2. Create Overlays with the New Modal Component:-  Use modals to interrupt a user’s workflow and draw attention to an important message. A modal, which displays the message on top of the current app window, requires a user to interact with it to regain control over the app.
    1. To create a modal component, import LightningModal from lightning/modal in your JavaScript file. Then, create a component class that extends LightningModal.

      /* c/myModal.js */
      import { api } from 'lwc';
      import LightningModal from 'lightning/modal';
      export default class MyModal extends LightningModal {
          handleOkay() {

    2. This component doesn’t use a lightning-modal tag. Instead, the modal’s HTML template uses helper lightning-modal-* components to make the modal’s header, footer, and body. The lightning-modal-body component is required, and the others are optional.

      <!-- c/myModal.html -->
          <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
          <lightning-modal-body>This is the modal’s contents.</lightning-modal-body>
              <lightning-button label="OK" onclick={handleOkay}></lightning-button>

  3. Remove Non-Global Design Tokens in CSS:- Only design tokens labeled as Global Access (GA) are supported in your Lightning web components’ CSS. Non-global design tokens no longer work after Spring’23.
    1.  After Spring’23, usage of non-global design tokens, such as those labeled as internal (I), results in a validation error No TOKEN named tokenName found during component save for API version 57.0 and later. 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); 

      The following usage is allowed, but it’s invalid because of the non-global --lwc-heightInput token, which is placed inside the calc CSS function.

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

      Replace the non-global tokens in your 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. Access iframe Content in Lightning Web Security:-  Lightning Web Security now permits Lightning web components to access content in iframe elements. With this change, you can use another web development feature that Lightning Locker blocks.
  5. Enable Third-Party Integrations with Light DOM (Generally Available):- Lightning web components render in shadow DOM by default, providing strong encapsulation but posing challenges for global styling and many third-party integrations. With light DOM, your component markup is attached to the host element instead of its shadow tree. You can then access it like any other content in the document host.
    1. To enable a component to render in light DOM, set the renderMode static field in your 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 your component.

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

      When you enable light DOM on a component, it no longer renders its elements in the #shadow-root tree.

              <p>Hello World</p>

      A light DOM component can contain a shadow DOM component. Similarly, a shadow DOM component can contain a light DOM component. However, base Lightning components always render in shadow DOM. Restricting light DOM to specific namespaces isn’t supported.

      LWC doesn’t scope styles automatically for you. To prevent styles from bleeding in or out of a component, use a *.scoped.css file to implement scoped styles for a component.

Additional Enhancements Worth Noting!

  1. Secure Components by Default with Lightning Web Security in New Orgs: – To protect custom Lightning web components, the setting Use Lightning Web Security for Lightning web components is enabled by default in new Salesforce orgs. The new Lightning Web Security architecture is replacing Lightning Locker over several releases.
    1. Lightning Locker has been the default security architecture for Lightning components. Lightning Web Security (LWS) is replacing Lightning Locker for Lightning web components initially, and then Salesforce intends to add support for Aura components over several releases. When enabled, LWS currently supports Lightning web components only. Lightning Locker still supports Aura components. This change affects your new org only if you add Lightning web components or install managed packages that contain Lightning web components. The Lightning web components then run with LWS instead of Lightning Locker.
  2. Support for Amazon Athena in Salesforce Connect: – Integrate data stored in Amazon S3 into your org with clicks instead of using custom code, ETL, or a mix of both. Eliminate the “swivel chair” effect for your end users by surfacing S3 data directly in the Salesforce user experience.
  3. New Lightning Web Components: – Do more with Lightning web components by using modules.
    1. experience/cmsDeliveryApiThis module includes a new wire adapter for retrieving content from an enhanced CMS workspace to use in an enhanced LWR site.
      1. getContent—Retrieves published content from enhanced CMS workspaces.
    2. experience/cmsEditorApi This module includes new wire adapters and methods for working with the content editor in an enhanced CMS workspace.
      1. The new wire adapters are:
        1. getContent—Retrieves the title, urlName, and contentBody of the content item based on the content type—image, news, document, or custom content.
        2. getContext—Retrieves metadata that provides contextual information about the content item in the CMS content editor.
      2. The new method is:
          1. setContent—Updates the title and contentBody of the content item in the editor.
            import { LightningElement, wire } from 'lwc';
            import { getContext }  from 'experience/cmsEditorApi';
            export default class Example extends LightningElement {
                @wire(getContext, {})
    3. lightning/fileDownload – Enables file downloads from custom components in LWR sites. Generates a URL that lets users download Salesforce files, attachments, and documents from desktop and mobile devices.
    4. lightning/modal – This module includes a new library used to create the new modal component.
      • LightningModal— Extend this component instead of LightningElement to create a modal. LightningModal gives your component access to the normal LWC resources and the special modal container, helper components, methods, and events.
        /* c/myModal.js */
        import LightningModal from 'lightning/modal';
        export default class MyModal extends LightningModal {
            /* component content */

Formative Assessment:

I want to hear from you!
What is your favorite Winter’23 release note, the Lightning Web Component gem? Care to share? You can download release notes in HTML format! for PDF files.
Feel free to share in the comments below.
Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.