The Lightning Runtime: Where LWCs Can Be Used
By the end of this lesson, you'll be able to:
- List the Salesforce surfaces where an LWC can be deployed
- Explain the role of the .js-meta.xml file in exposing a component
- Design a component's assumptions around its intended target surface
Prerequisites: "Web Standards Behind LWC"
Every Place an LWC Can Live
- Lightning App Builder pages — Home, Record, App, and Utility Bar pages.
- Lightning Experience navigation — as a full custom tab.
- Salesforce Mobile App — largely automatic for a responsively-built component (Module 18 covers this in depth).
- Experience Cloud sites — Salesforce's customer/partner-facing portal product, via LWC-enabled Experience Builder templates.
- Flow Screens — as a Screen Component, letting a declarative Flow builder drop in custom UI.
- Quick Actions.
The Lightning Web Runtime (LWR)
LWR is Salesforce's newer, LWC-first site-hosting runtime, used for modern Experience Cloud sites — it renders LWC natively and efficiently, unlike older Aura-based site templates. This course focuses on component development rather than deep Experience Cloud site-building, but it's worth knowing LWR exists as the modern hosting layer behind newer Salesforce sites.
Exposing a Component for These Targets
A component isn't automatically available everywhere just because it exists. The .js-meta.xml configuration file (built firsthand in Lesson 5, covered fully in Module 3) declares exactly which targets — lightning__AppPage, lightning__RecordPage, lightning__HomePage, lightning__Tab, and others — a component is allowed to appear in, along with any configurable properties an admin can set for it inside App Builder.
Why This Matters in Real Projects
Architecture decisions depend entirely on target. A component built for a Record Page can safely assume it has access to a specific record's recordId. A component built for a Home Page cannot — there is no single record in context there. Deciding a component's intended surface before writing code avoids designing around assumptions that quietly don't hold once it's actually deployed.
Exercise
A component you're building will live exclusively on the Contact Record Page. List two assumptions you can safely make about the data available to it because of that placement, as a comment.
Show hint
Think about what context a Record Page always provides.
Exercise
Challenge: an admin now wants to reuse the SAME component on a Home Page dashboard. What would need to change about the component's design to support both placements safely?
Show hint
Think about what breaks when recordId is no longer guaranteed.
The Lightning Runtime: Where LWCs Can Be Used Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
An LWC isn't automatically available everywhere — its .js-meta.xml file declares which Salesforce surfaces it can appear on, and a component's design should follow from its intended target, not the other way around.