Example: Random Square with Conditional Display

同学，我们来看一个在Lightning Web Components里很重要的设计模式：如何有条件地显示一个自定义元素。 很多时候，你可能会想，“我直接用 JavaScript 操作 DOM 行不行？比如 appendChild、removeChild？” 但 Salesforce 推荐的方式更声明式，也更安全，就是用 `lwc:if` 这个指令。为什么？因为它能自动帮你触发自定义元素的生命周期回调，也就是 `connectedCallback` 和 `disconnectedCallback`。这一点特别关键，因为当你用命令式操作 DOM 时，这些回调可能不会按预期触发，导致内存泄漏或者状态不同步。 我们来看这个例子。有一个自定义元素叫 `custom-square`，它定义在 `customSquare.js` 里。这个元素有几个特性：它有颜色和大小的属性，还有一个 `updateStyle` 方法来根据属性动态注入 CSS。并且它会在控制台记录生命周期事件，这样你就能清清楚楚看到组件什么时候被创建、什么时候被移除。 同时，我们的父组件（也就是 LWC 组件）负责管理所有状态。它维护着 `showSquare` 变量来控制自定义元素的显示和隐藏；还有一个 `buttonDisabled` 状态来决定按钮是否可用；以及一些方法来添加、更新或删除“收件箱”里的项目。在这个模板里，我们用 `lightning-button` 来切换显示，并且把从按钮选出的颜色和大小值当作反应属性传给 `custom-square`。 所以整体流程就是：当你点击按钮，`showSquare` 状态改变，`lwc:if` 条件重新计算，如果为 true，`custom-square` 就被渲染，其 `connectedCallback` 自动执行，你的日志就会输出；如果为 false，元素被移除，`disconnectedCallback` 执行。这样你就不需要自己操作 DOM，数据流清晰，生命周期可预测，代码也更简洁。 记住这个模式：用 `lwc:if` 来控制自定义元素的可见性，而不是直接 append 或 remove。这既符合框架的最佳实践，也让你的组件更容易维护。