一、场景说明
这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。
学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。
二、可运行演示
三、知识点提醒
- 自定义元素名称必须包含短横线，例如 `product-card`。
- `connectedCallback` 在元素插入页面时执行。
- Web Components 有 Shadow DOM，本页先用最易懂的 light DOM 写法。
四、练习建议
- 给组件增加 `image` 属性。
- 点击按钮时派发自定义事件。