Layouts are supported in the Build Your Own (LWR) template using Lightning web
components instead of Aura components. You can also create your own custom layouts in the same
way as for Aura sites, but with some minor changes in syntax.
If your custom theme layout component exposes design properties for
Experience Builder, remember to declare those properties in the targetConfig of the lightningCommunity__Default target in the js-meta.xml
file.
Regions
Slots are the new way to define parts of a web component's template that can be configured
declaratively. The presence of slots on your component tells Experience Builder that it’s a
region.
Named slots (<slot name="header">) are
analogous to component attributes in Aura layouts. If the slot doesn’t have a name, it’s
considered to be the default slot, which is analogous to {!v.body} in Aura.
To learn more about how LWC uses slots, see Pass Markup into Slots in the
Lightning Web Components Dev Guide.
Page Layout
Page layout components use the
lightningCommunity__Page_Layout target in
js-meta.xml.
See an example of a two-row page layout with an exposed hero banner region in
customLayoutsAndBranding/force-app/main/default/lwc/customPageLayout
in the code sample files.
The JSDoc annotation containing @slot followed by the name of the region is required for the platform to know
which slots (or regions in Experience Builder) are exposed for your page layout component.
For
example:
1/**
2* @slot contentHeaderRegion
3* @slot contentRegion
4* @slot contentFooterRegion
5*/
Theme Layout
Theme layout components use the lightningCommunity__Theme_Layout target in js-meta.xml.
In Aura theme layout components, you include
{!v.body} to denote where your content is rendered. Similarly, for an LWC theme
layout component, you must include a default slot—essentially, a slot with no name:
<slot></slot>—to indicate the region for your main
content.
The JSDoc annotation containing @slot followed by the name of the region is required for the platform to know
which slots (or regions in Experience Builder) are exposed for your theme layout component.
For example:
1/**
2* @slot themeHeaderRegion
3* @slot themeFooterRegion
4*/
F6 Navigation
F6 navigation is available for theme layout components only. The framework treats any DOM
elements with the data-f6-region attribute as an
F6-navigable region.
To enable F6 navigation for regions in your theme layout, add the data-f6-region attribute to the major regions.
1<template>
2 <header data-f6-region style={headerStyle}>
3 <slot name="header"></slot>
4 </header>
5 <section data-f6-region style={sectionStyle}>
6 <slot></slot>
7 </section>
8 <footer data-f6-region style={footerStyle}>
9 <slot name="footer"></slot>
10 </footer>
11</template>
j