一、发现 Lightning Web Components
Lightning Web Components（LWC）基于原生 Web 标准——HTML、JavaScript、CSS——直接在浏览器中运行，无需沉重框架开销。本单元了解 LWC 与旧 Aura 框架的根本区别，以及它对现代 Salesforce UI 开发的意义。
学习目标（单元一）
完成本单元后，你将能够：解释 LWC 的编程模型及它与 Aura Components 的区别；列举 LWC 的优势（性能、Web 标准、开发者可用性、框架简单）；识别 LWC 开发的前提（Salesforce DX、CLI、VS Code、Trailhead Playground）。
为什么选择 Lightning Web Components？Web 标准很重要
现代浏览器建立在 Web 标准之上，且逐年进步。LWC 拥抱它们而非取代。LWC 用核心 Web Components 标准：Custom Elements（定义自己的 HTML 标签如 <c-bike-card>）、Shadow DOM（每组件封装的 DOM 和样式）、HTML Templates（组件 markup）、ES Modules（标准 JS 模块系统）。
因为 LWC 在浏览器中原生运行：轻量（无需下载厚重框架 JS）、卓越性能（浏览器优化渲染）、标准代码（大部分是普通 JS 和 HTML）。对开发者的意义：能用 Google/Stack Overflow 找方案、技能可流入流出 Salesforce 生态、可雇佣懂 JS/HTML/CSS 的开发者、学习更快（已知概念直接适用）。
LWC vs Aura：两者共存——现有 Aura 组件继续工作、Aura 可包含 LWC（反之不行）、新开发应面向 LWC。LWC 不只是新框架，而是 Salesforce 向整个 Web 开发生态敞开大门。
二、创建与部署 Lightning Web Components
动手创建 LWC：三个文件（HTML、JavaScript、可选 CSS）、基础 Lightning 组件、XML 配置文件、用 Salesforce CLI 部署，再用 App Builder 添加到 Lightning 页面。
LWC 的解剖
每个 LWC 由命名文件夹中的最多三个文件组成：
- HTML 文件——结构和 markup：标准 HTML + LWC 指令（
lwc:if、lwc:for:each、lwc:else）、基础组件（<lightning-button>等）、{property}绑定数据。 - JavaScript 文件——逻辑和数据：
export default class extends LightningElement；@track响应式私有属性、@api公共属性；生命周期钩子（constructor()、connectedCallback()、renderedCallback()、disconnectedCallback()）；事件处理器。 - CSS 文件（可选）——样式：标准 CSS，自动作用域到本组件（Shadow DOM 防泄漏）；用 SLDS class 或自定义 CSS。
- XML 配置文件——元数据（部署必需）：定义 API 版本、指定组件可出现的 target（
lightning__RecordPage等）、把 @api 属性暴露为 App Builder 可配置。
文件夹结构：force-app/main/default/lwc/myComponent/ 下放 .html、.js、.css（可选）、.js-meta.xml（必需）。
三、处理事件——事件向上、属性向下
LWC 组件通过单向数据流通信：事件向上（子到父）、属性向下（父到子）。本单元构建一个四组件的自行车选择器应用，掌握这个模式。
通用的 LWC 通信模式
LWC 强制组件间的单向数据流：
事件向上（子→父）：子组件用 CustomEvent 派发数据（this.dispatchEvent(new CustomEvent('bikeselected', { detail: { bike: this.bike }, bubbles: true }))）；父组件在模板监听（<c-tile onbikeselected={handleBikeSelected}>）并在 JS 处理（this.selectedBike = event.detail.bike）。
属性向下（父→子）：子组件用 @api 声明公共属性（@api bike;）；父组件在模板传数据（<c-detail bike={selectedBike}>）；子组件在 @api 属性变化时响应。
为什么单向？可预测、可调试、可维护——你始终知道数据从哪来（父）、事件从哪来（子），没有神秘的双向绑定。
四、给组件添加样式与数据
用 CSS（Shadow DOM 自动作用域）给组件加样式、集成 Salesforce Lightning Design System（SLDS）、用 @wire 连接真实 Salesforce 数据，并确保移动端友好。
样式、SLDS 与 @wire 真实数据
CSS 样式：Shadow DOM 自动作用域（每组件 CSS 只影响该组件，无样式泄漏、无 !important 大战）；用标准 CSS（类、选择器、媒体查询）、CSS 自定义属性做主题。
SLDS（Salesforce Lightning Design System）：导入 SLDS 样式获得一致的 Salesforce 观感；直接用 SLDS class（class="slds-box slds-theme_default"）；SLDS 提供网格系统、排版、颜色、间距、图标、组件蓝图；Styling Hooks 用 CSS 变量定制。
@wire 真实数据：wire 服务响应式地把 Salesforce 数据带入组件（基础 CRUD 无需 Apex）：@wire(getRecord, { recordId: '$recordId', fields })；数据响应式提供（记录变化时更新）；支持 LDS wire 适配器和 Apex 方法。
移动端友好：Salesforce 跑在手机上，组件也必须如此；用响应式 SLDS 网格 class（slds-size_1-of-1、slds-medium-size_1-of-2）；在窄视口测试；交互元素触摸目标至少 44x44 像素。
