Each Lightning web component folder must include a configuration file named <component>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration values for Experience Builder.
If you previously created Lightning web components for Experience Builder sites, you’re familiar with the lightningCommunity__Page and lightningCommunity__Default targets. For the LWR template, we added two new target types—lightningCommunity__Page_Layout and lightningCommunity__Theme_Layout.
| Target Value | Description |
|---|---|
lightningCommunity__Page | Enables a drag-and-drop component to be used on an LWR or Aura site page in Experience Builder. Components appear in the Components panel. |
lightningCommunity__Page_Layout | Enables a component to be used as a page layout in an LWR site in Experience Builder. Components appear in the Page Layout window. |
lightningCommunity__Theme_Layout | Enables a component to be used as a theme layout in an LWR site in Experience Builder. Components appear in Settings in the Theme area. |
lightningCommunity__Default | Used together with lightningCommunity__Page or lightningCommunity__Theme_Layout. Enables a component to expose properties that are editable when the component is selected in Experience Builder.For Experience Builder sites, only lightningCommunity__Default supports configurable component properties. We support these property attribute data types:
|
To use a component in Experience Builder, edit the <component>.js-meta.xml file to define the component’s design configuration values as follows.
isExposed to true, and define lightningCommunity__Page, lightningCommunity__Page_Layout, or lightningCommunity__Theme_Layout in targets.lightningCommunity__Default in targets and define the properties in targetConfigs.See Configure a Component for Experience Builder in the Lightning Web Components Developer Guide.
All configuration file tags listed in Configuration File Tags in the Lightning Web Components Developer Guide are supported.
Note
Let’s look at some sample code for a Lightning web component that includes four editable properties. lightningCommunity__Page tells Experience Builder that this component is a drag-and-drop component. And the lightningCommunity__Default target is used to configure any design-time component properties for Experience Builder in its targetConfig.
Base Lightning Component Limitations in LWR Sites
In LWR sites for Experience Cloud, you can use most of the components in the Lightning Component Library, but there are some limitations.
User Interface API allows you to get Salesforce record data into your Lightning web component. LWR sites don’t require anything special when developing your Lightning web components with User Interface API.
@salesforce Modules in LWR Sites
LWR sites in Experience Cloud support @salesforce modules, which add functionality to Lightning web components at runtime.
Use the lightning/navigation API to navigate to different pages within your site, generate URLs to different routes, and get the current pageReference object.
Make a Custom Lightning Web Component Screen-Size Responsive
For enhanced LWR sites, you can assign separate values for the desktop, mobile, and tablet versions of certain properties in custom Lightning web components. With screen-responsive properties, the component uses the correct property value based on the end user’s screen size.
j