template元素仅为不渲染的模具，真正组件化需结合custom elements api实现封装、传参与样式隔离；必须用customelements.define()注册类并实现生命周期方法（如connectedcallback、attributechangedcallback）和shadow dom才能达成完整组件能力。
template 元素本身不是组件，它只是浏览器不渲染的“模具”；真正的组件化需要配合 JavaScript 实例化逻辑或 Custom Elements API 才能复用、传参、隔离样式。
template + cloneNode() 是最轻量的起步方式
直接写 <template id="card"><div class="card">
<h3>{{title}}</h3>
<p>{{content}}</p>
</div></template> 没用 —— 它不会自动替换占位符，也不会插入页面。
- 必须手动调用
document.getElementById('card').content.cloneNode(true)获取文档片段 - 占位符如
{{title}}要靠 JS 遍历节点并替换，不能依赖 innerHTML 直接插值（会丢失事件绑定和表单状态） - 若模板含
<input>或<select></select>，推荐用document.importNode(template.content, true)替代cloneNode()，避免表单元素重置 - 不要在
template.content上直接操作 DOM，它不属于当前文档树，修改无效
customElements.define() 才算真正封装的 HTML 组件
写个 class CardComponent extends HTMLElement 并注册后，<my-card title="Hello"></my-card> 就能响应属性变更、自带生命周期、样式默认隔离。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
constructor()中必须调用super()，否则报Failed to construct 'CustomElement' - DOM 操作不能放在
constructor里（此时元素未挂载），应移至connectedCallback() - 想让
title属性变化时更新视图，得声明static get observedAttributes() { return ['title']; }并实现attributeChangedCallback() - Shadow DOM 默认不继承外部样式，
slot是内容分发唯一标准方式，别试图用querySelector穿透取子元素
fetch() + innerHTML 看似简单，但有硬伤
很多人用 fetch('header.html').then(r => r.text()).then(html => el.innerHTML = html) 加载片段，这在开发阶段容易踩坑：
- 本地双击打开 HTML 文件时，
file://协议触发 CORS，fetch直接失败（必须起本地服务，如npx serve） - 每次加载都发起网络请求，无缓存、不可预编译，不适合高频复用场景
- 插入的 HTML 中的内联脚本（
<script>console.log(1)</script>）不会执行，需手动eval或创建 script 标签再 append - 没有作用域隔离，样式和事件监听器可能污染全局环境
关键点不在“怎么拆出 HTML 片段”，而在于“谁负责初始化、传参、更新、销毁”。template 只是容器，Custom Elements 才带生命周期和封装契约。没定义 attributeChangedCallback 的自定义标签，和普通 div 没本质区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
