不能直接当组件用，因其仅为惰性容器，内容不解析、不执行脚本、不加载资源，也不响应属性或事件；必须配合customelements.define()注册、attachshadow()挂载，并在connectedcallback中调用content.clonenode(true)显式克隆插入shadow dom才能生效。
直接用 <template></template> 标签管理 HTML 模板是可行的，但必须配合 customElements.define() 和 attachShadow() 才能真正复用；单独把 HTML 写进 <template></template> 不会自动渲染，也不构成组件。
为什么 <template></template> 不能直接当组件用
<template></template> 只是浏览器的“惰性容器”，内容不会解析、不执行脚本、不加载资源，也不会响应属性或事件。常见错误是把模板写好就以为能用了，结果 <my-button></my-button> 渲染出来是空的——因为没注册类、没挂载 Shadow DOM、也没把模板内容 clone 进去。
- 模板内容必须显式调用
content.cloneNode(true)才能插入 Shadow DOM -
<template></template>内部写<script></script>或<style></style>会被忽略，得用 JS 动态创建并 append - 多个组件共用一个
<template id="xxx"></template>是安全的，但每个实例都要独立 clone，否则会移动节点（DOM 移动后原位置为空）
customElements.define() 必须在 DOM ready 后调用
如果把组件定义代码放在 <script></script> 标签里且没加 defer 或没放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
