Lightning Web Components: Custom Nested Components

Lightning Web Runtime, or LWR for short was released back in Spring 21 (v51.0). Even before the release of LWR, most developers dreamed of being able to build custom nested components. We could see that OOTB (Out Of The Box) components could use them (…


This content originally appeared on DEV Community and was authored by Luke Secomb

Lightning Web Runtime, or LWR for short was released back in Spring 21 (v51.0). Even before the release of LWR, most developers dreamed of being able to build custom nested components. We could see that OOTB (Out Of The Box) components could use them (see Tabs component).

Salesforce recently released the ability to build custom LWCs with child <slot/>'s, to allow nesting of components. Nested LWCs allow you to compose multiple components together into a single component. The child components maintain their own life cycle and can communicate with each other through events, making it easy to create flexible and dynamic apps.

Before continuing, Aura based Communities are (sadly) not supported. So if you're currently using them it might be time to make the switch to LWR.

Code Example

Enough talk, lets jump into the code and see the magic happen.

HTML

We'll start by creating the HTML template to hold our <slot/>'s.

<template>
  <template if:false={isAura}>
    <div class="container">
      <div>
        <slot name="region1"></slot>
      </div>
      <div>
        <slot name="region2"></slot>
      </div>
      <div>
        <slot name="region3"></slot>
      </div>
    </div>
  </template>
</template>

JavaScript

Now lets have a look at the JavaScript. The important part (or magic) here is the @slot definitions in the comment directly above the LWC export. Without these definitions, the dynamic components will not work.

The isAura check also ensures this component shows a warning in the experience builder when it is being used from within an Aura based community.

import { LightningElement } from 'lwc'

/**
 * @slot region1
 * @slot region2
 * @slot region3
 */
export default class NestedLWCs extends LightningElement {
  get isAura() {
    return window['$A'] !== undefined && window['$A'] !== null
  }
}

Metadata XML

Make sure your .xml file is setup to be available in the experience builder. The key values are setting isExposed to true and including both lightningCommunity__Page and lightningCommunity__Default as targets.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>57.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Nested LWCs</masterLabel>
  <description>Nested LWC magic</description>
  <targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
  </targets>
</LightningComponentBundle>

Experience Builder

Now lets open up the Experience Builder and see our custom LWC in action.

Experience Builder: Draging our custom LWC onto the page

We can also nest components within other nested components. I am not aware of any limitation here. I was able to place up to 10 levels deep without any issues, noting theses are very barebones test LWCs. More complex LWCs may start affecting performance.

Experience Builder: Draging our custom LWC onto the page

Wrapping Up

In summary, nested LWCs provide a powerful and flexible way for developers to create custom components that can be composed of multiple other components, making it easier to build dynamic and reusable apps on the Experience Cloud platform.


This content originally appeared on DEV Community and was authored by Luke Secomb


Print Share Comment Cite Upload Translate Updates
APA

Luke Secomb | Sciencx (2023-03-20T02:15:28+00:00) Lightning Web Components: Custom Nested Components. Retrieved from https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/

MLA
" » Lightning Web Components: Custom Nested Components." Luke Secomb | Sciencx - Monday March 20, 2023, https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/
HARVARD
Luke Secomb | Sciencx Monday March 20, 2023 » Lightning Web Components: Custom Nested Components., viewed ,<https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/>
VANCOUVER
Luke Secomb | Sciencx - » Lightning Web Components: Custom Nested Components. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/
CHICAGO
" » Lightning Web Components: Custom Nested Components." Luke Secomb | Sciencx - Accessed . https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/
IEEE
" » Lightning Web Components: Custom Nested Components." Luke Secomb | Sciencx [Online]. Available: https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/. [Accessed: ]
rf:citation
» Lightning Web Components: Custom Nested Components | Luke Secomb | Sciencx | https://www.scien.cx/2023/03/20/lightning-web-components-custom-nested-components/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.