Lwc Experience Cloud

LWC Experience Cloud Development

Generate production-grade Lightning Web Components for Salesforce Experience Cloud sites, with correct meta XML configuration, proper CSS architecture, and awareness of guest user context, sharing model implications, and Experience Builder integration patterns.

Before Writing Any Code

1. Determine the runtime. Ask whether the site is LWR or Aura-based if not specified. The answer changes CSS scoping, routing, available targets, rendering behavior, and whether SSR/hydration is available. Read reference/lwr/experience-cloud-sites-overview.md for the differences.

2. Determine the user context. Is this component for guest (unauthenticated) users, authenticated community members, or both? Read reference/site-setup/guest-user-data-access.md for Apex sharing patterns and reference/lwc-patterns/secure-apex-classes.md for FLS enforcement.

3. Determine the component's role. Is this a:

   • Page component → dragged onto a page in Experience Builder
   • Theme layout → wraps the entire page (header/footer/structure) — LWR only
   • Page layout → defines the content area grid for an LWR page — LWR only
   • Custom property editor → configures another component's properties in Builder

   Each role has different meta XML targets. Read reference/lwr/lwr-sites-architecture.md for layouts or reference/builder-ui/custom-property-editor-contract.md for CPEs.

Meta XML Configuration

Every Experience Cloud LWC needs specific targets in js-meta.xml:

Page Components (most common)

<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>

• lightningCommunity__Page makes it draggable onto pages in Experience Builder
• lightningCommunity__Default exposes @api properties in the property panel
• Both are required for a configurable page component

Theme Layouts (LWR only)

<targets>
    <target>lightningCommunity__Theme_Layout</target>
    <target>lightningCommunity__Default</target>
</targets>

Page Layouts (LWR only)

<targets>
    <target>lightningCommunity__Page_Layout</target>
    <target>lightningCommunity__Default</target>
</targets>

Custom Property Editors

<targets>
    <target>lightning__PropertyEditor</target>
</targets>

SSR Support (LWR only)

<capabilities>
    <!-- static HTML only, no client JS: -->
    <capability>lightning__ServerRenderable</capability>
    <!-- SSR with client-side hydration for interactivity: -->
    <capability>lightning__ServerRenderableWithHydration</capability>
</capabilities>

For the complete target and capability reference, read reference/lwc-patterns/xml-configuration-reference.md.

CSS Architecture Rules

1. Global/shared CSS goes in Experience Builder → Settings → Advanced → Edit Head Markup. This is NOT the same as the Setup gear icon in the main org.

2. Component CSS stays scoped inside each LWC's .css file.

3. In LWR sites, use --dxp styling hooks for brand colors, text, and spacing. These map to Experience Builder's Theme panel. Use --dxp-g-brand for brand color, --dxp-g-root for background, etc. Read reference/lwr/lwr-sites-architecture.md (--dxp Styling Hooks section).

4. For base component styling in LWR, use ::part() with SLDS hooks — native shadow DOM blocks direct targeting. Read reference/lwr/lwr-base-component-styling.md.

5. For SSR components, use light DOM (static renderMode = 'light'). Read reference/lwr/light-dom.md and reference/lwr/lwr-configure-components-ssr.md.

Guest User Patterns

When building components accessible to unauthenticated users:

1. The guest user profile is named [Site Name] Profile, NOT Guest User
2. Object permissions AND Field-Level Security must both be configured on the profile
3. without sharing on Apex bypasses record sharing rules but still requires object-level Read/Create on the guest profile
4. Guest user sharing rules grant Read Only access — updates/deletes MUST use without sharing
5. Guest users can never own records — records are assigned to a default org user
6. Never return raw record IDs to guest users — use encrypted tokens
7. Read reference/site-setup/guest-user-profile-setup.md for the full setup walkthrough and reference/site-setup/guest-user-data-access.md for Apex patterns

Navigation

Use the lightning/navigation module with NavigationMixin. Experience Cloud has different PageReference types than Lightning Experience:

• comm__namedPage for EC pages (NOT standard__namedPage)
• standard__recordPage requires objectApiName in LWR sites
• Only actionName: 'view' works for records in EC (no edit or clone)

Read reference/lwc-patterns/page-reference-types.md for the complete reference.

For site navigation menus (header/footer links): use Experience Cloud's Navigation Menu feature and pull menus dynamically into your LWC via Apex + ConnectApi, not hardcoded links. Read reference/lwr/lwr-sites-architecture.md (Custom Navigation Menu section).

Apex Patterns for EC

• Always declare with sharing, without sharing, or inherited sharing explicitly
• @AuraEnabled(cacheable=true) for read-only methods used with @wire
• @AuraEnabled (no cacheable) for DML methods called imperatively
• Use WITH USER_MODE in SOQL for automatic FLS enforcement
• Use AuraHandledException for clean error messages to the client
• Governor limits: 100 SOQL queries, 150 DML statements, 6MB heap (synchronous)

Read reference/lwc-patterns/apex-fundamentals-for-ec.md for the full reference including governor limits, async patterns, and bulkification.

Site Architecture and Deployment

When planning a new LWR site or deploying Experience Cloud metadata:

1. Understand the layer model. Theme layouts wrap pages, page layouts define the grid, page components fill the grid, and content.json binds them together. Read reference/lwr/site-architecture-mental-model.md for the full mental model including a planning template and worked example.

2. Know the bundle structure. DigitalExperienceBundles live under force-app/main/default/digitalExperiences/site/<SiteName>/. Each page has three metadata folders: sfdc_cms__appPage (content), sfdc_cms__view (layout binding), and sfdc_cms__route (URL mapping). Each contains a content.json that defines which components go in which regions. Read reference/lwr/digital-experience-bundle-structure.md for the schema.

3. Deploy in the right order. Apex classes first, then LWC, then the DigitalExperienceBundle, then republish. Never deploy the bundle before the components it references — first-time deploys MUST be two separate commands. Read reference/lwr/deploy-ordering-and-publishing.md for the full sequence.

4. Always republish. LWR sites use a publish-freeze model. Deployed changes are invisible until you run sf community publish --name "SiteName" or click Publish in Experience Builder.

5. Understand theme layout region contracts. The default (unnamed) slot is required. Named slots (header, footer) are conventions, not enforced. Slot fallback content does NOT work — the platform always projects an empty region wrapper. Read reference/lwr/lwr-sites-architecture.md (Theme Layout Region Contract section).

Code Style

When generating code for this developer:

• Apex comments: // with one space, disembodied narrator tone (// begin sorting through accounts, // remember we set this for the guest profile)
• Every method: document params and return value in comments
• Debug statements: at key decision points to aid development
• No single-line conditionals except ternary ? operator
• JavaScript: more detailed comments explaining what non-obvious patterns do
• Variable names: meaningful in context, never temp, data, result without qualifier

Reference Docs

Read the relevant reference doc BEFORE generating code:

Templates

Use these as starting points when generating components:

Checklists

Offer relevant checklists when the user is setting up or going live: