`lightningCommunity__Theme_Layout` Target

Enables a component to be used in Experience Builder as a theme layout for an LWR site. Components appear in Settings in the Theme area.

Syntax

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>58.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightningCommunity__Theme_Layout</target>
7    </targets>
8</LightningComponentBundle>

Usage

lightningCommunity__Page_Layout doesn’t support component properties. To indicate the region for your main content, include a default slot <slot></slot> in your template. You can also use the Lightning Design System utility classes for padding or alignment. In this example, F6-navigable region indicates an F6-navigable region.

1<template>
2  <header data-f6-region class="slds-col_padded slds-p-vertical_small">
3    <slot name="sidebar"></slot>
4  </header>
5  <section data-f6-region>
6    <slot></slot>
7  </section>
8</template>

In your component’s JavaScript, include the @slot annotation in a JSDoc comment.

1import { LightningElement } from "lwc";
2
3/**
4 * @slot sidebar
5 */
6export default class CustomThemeLayout extends LightningElement {}

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.

See Also

lightningCommunity__Theme_Layout Target

Syntax

Usage

`lightningCommunity__Theme_Layout` Target