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.
      Copy Code Copied Use a different Browser

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

   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.
      Copy Code Copied Use a different Browser

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

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.
      Copy Code Copied Use a different Browser

      
      
      /* 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.
      Copy Code Copied Use a different Browser

      
      /* This doesn't work after Spring '23 */
      .resultcontainer{    
          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.

      Copy Code Copied Use a different Browser

      
      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.
      Copy Code Copied Use a different Browser

      
      
      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.
      Copy Code Copied Use a different Browser

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

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

      Copy Code Copied Use a different Browser

      
      <my-app>
          <my-header>
              <p>Hello World</p>
          </my-header>
      </my-app>
      

      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.