Prime 5 Lightning Internet Part Gems of Salesforce Winter’23 Launch!

Final Up to date on September 10, 2022 by Rakesh Gupta

The Lightning Part trendy framework is a Consumer Interface framework to develop dynamic internet apps for cellular and desktop gadgets. As is the case with every launch, the newest Winter’23 launch is full of wealthy options, together with the newly added Lightning Part options! 

At the moment, the Winter’23 launch is below the pre-release program. You probably have not learn the 577 pages of Salesforce Winter’23 launch notes, take a look at the Winter’23 launch quick summary and Top 10 Gems of Salesforce Lightning Experience Written by me.

I combed by the discharge notes and highlighted the added capabilities to the Lightning Internet Part options. Consider me; it was onerous to cease at simply 5! To kick issues off, right here is my tackle the best Lightning Web Component options from the Winter’23 launch.  

1. Synchronize Part Information With no Web page Refresh by Utilizing RefreshView API (Pilot):- Whether or not user-driven or app-invoked, the power to synchronize information with out reloading a complete web page is a key consumer expertise requirement. The brand new lightning/refresh module and RefreshView API present an ordinary solution to refresh element information in LWC and Aura. Beforehand, LWC lacked an information refresh API, and Aura solely supported the legacy, drive:refreshView which doesn’t meet the necessities of contemporary internet growth. 
   1. RefreshView API updates the information for a particular hierarchy of parts, generally known as a view, with out reloading a complete web page. This refresh ensures full synchronization with information externally sourced by parts in that view. RefreshView API can refresh information for Salesforce platform containers and customized parts.

2. Create Overlays with the New Modal Part:-  Use modals to interrupt a consumer’s workflow and draw consideration to an necessary message. A modal, which shows the message on prime of the present app window, requires a consumer to work together with it to regain management over the app.
   1. To create a modal element, import LightningModal from lightning/modal in your JavaScript file. Then, create a element class that extends LightningModal.

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

   2. This element doesn’t use a lightning-modal tag. As an alternative, the modal’s HTML template makes use of helper lightning-modal-* parts to make the modal’s header, footer, and physique. The lightning-modal-body element is required, and the others are optionally available.

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

3. Take away Non-World Design Tokens in CSS:- Solely design tokens labeled as World Entry (GA) are supported in your Lightning internet parts’ CSS. Non-global design tokens not work after Spring’23.
   1.  After Spring’23, utilization of non-global design tokens, corresponding to these labeled as inside (I), ends in a validation error No TOKEN named tokenName discovered throughout element save for API model 57.zero and later. For instance, this utilization of the non-global --lwc-heightInput token isn’t allowed and returns the error No TOKEN named drive:base.heightInput discovered.

      /* This non-global token utilization does not work */
      div { 
          peak: var(--lwc-heightInput); 
      }
      
      
      
      
      			

      
      The next utilization is allowed, nevertheless it’s invalid due to the non-global --lwc-heightInput token, which is positioned contained in the calc CSS perform.

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

      Substitute the non-global tokens in your CSS with a worldwide token or use a customized Aura design token as an alternative.

      
      div {
          peak: var(--lwc-lineHeightText); /* use a worldwide design token */
      }
      
      .resultcontainer {    
          peak: calc(var(--lwc-height-header) - (var(--lwc-lineHeightText)));
      }
      
      
      
      
      			

      
      

4. Entry iframe Content material in Lightning Internet Safety:-  Lightning Internet Safety now permits Lightning internet parts to entry content material in iframe components. With this modification, you should utilize one other internet growth characteristic that Lightning Locker blocks.
5. Allow Third-Get together Integrations with Mild DOM (Typically Accessible):- Lightning internet parts render in shadow DOM by default, offering robust encapsulation however posing challenges for international styling and plenty of third-party integrations. With mild DOM, your element markup is hooked up to the host ingredient as an alternative of its shadow tree. You’ll be able to then entry it like every other content material within the doc host.
   1. To allow a element to render in mild DOM, set the renderMode static subject in your element class.

      import { LightningElement } from 'lwc';
      
      export default class LightDomApp extends LightningElement {
          static renderMode="mild"; // the default is 'shadow'
      }
      
      
      
      
      			

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

      
      <template lwc:render-mode="mild">
          <my-header>
              <p>Hi there World</p>
          </my-header>
      </template>
      
      
      
      
      			

      Whenever you allow mild DOM on a element, it not renders its components within the #shadow-root tree.

      
      <my-app>
          <my-header>
              <p>Hi there World</p>
          </my-header>
      </my-app>
      
      
      
      
      			

      A lightweight DOM element can include a shadow DOM element. Equally, a shadow DOM element can include a lightweight DOM element. Nevertheless, base Lightning parts at all times render in shadow DOM. Limiting mild DOM to particular namespaces isn’t supported.

      LWC doesn’t scope kinds routinely for you. To stop kinds from bleeding in or out of a element, use a *.scoped.css file to implement scoped kinds for a element.