<template>不能嵌在<div>里，因为其内容仅在文档顶层（如<body>直接子节点）时template.content才可被正确克隆；若被包裹，浏览器会丢弃内容，导致cloneNode(true)返回空片段。
为什么<template>不能嵌在<div>里用
因为<template>的内容只有在文档顶层（即直接子节点于<html>或<body>）时，template.content才可被正确克隆；若它被包裹在<div>、<section>甚至自定义组件内部，浏览器会忽略其内容，template.content返回空文档片段——你调用cloneNode(true)后得到的是一片空白。
常见错误现象：
- 页面无报错，但目标区域始终为空
-
console.log(template.content.childNodes)输出[] - 用
innerHTML读取<template>标签内容正常，但.content为空
实操建议：
- 把所有
<template>统一放在<body>底部，紧贴</body>前 - 避免用 JS 动态插入
<template>到任意容器——即使 DOM 已就绪，插入位置仍影响content可用性 - 若需按模块组织，可用
id或data-type分类，而非物理嵌套
Web Components注册失败报TypeError: Class constructor cannot be invoked without 'new'
这是 Custom Element 类未用class语法正确定义，或注册时未用new调用导致的典型错误。根本原因不是语法写错，而是类声明与注册时机不匹配。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- 用函数表达式代替
class定义：比如const MyButton = function() {...}，再传给customElements.define() - 类定义写在
customElements.define()之后，JS 执行顺序导致类名未声明 - ES Module 中未确保类已 export/import 完毕就执行 define
实操建议：
- 必须用
class MyButton extends HTMLElement语法，且类名首字母大写 - 注册语句
customElements.define('my-button', MyButton)必须放在类定义之后、且 DOM 加载完成前（推荐放<script>末尾或DOMContentLoaded内） - 若用构建工具（如 Vite/Webpack），检查是否启用了
native模式或正确配置了define插件，避免类被意外转译成函数表达式
Flask/Jinja2中{% include %}变量传不进去怎么办
Jinja2 的{% include %}默认隔离上下文，子模板拿不到父模板的变量——这不是 bug，是设计使然。很多开发者卡在这一步，以为路径对了就万事大吉，结果渲染出来全是空值。
关键参数只有两个：
-
{% include "header.html" %}→ 无上下文，子模板只能访问内置变量（如loop） -
{% include "header.html" with context %}→ 显式透传当前作用域全部变量 -
{% include "header.html" with context ignore missing %}→ 透传 + 文件不存在时不报错
实操建议：
- 不要依赖“默认继承”，每次
include都明确加with context - 若只传部分变量，改用
{% set header_data = {'title': title, 'logo_url': logo} %}{% include "header.html" with context %}，并在子模板中用header_data.title - 路径始终相对于 Flask 的
templates/目录，不是相对于当前文件——这点和 Webpack 的html-loader完全不同，容易混淆
posthtml-include不识别./partial/footer.html这类相对路径
该插件默认只解析根路径（/footer.html）或无前缀的文件名（footer.html），不支持./或../这种基于当前文件位置的相对引用。这是构建时预处理工具的通病：它不运行在浏览器环境，没有“当前目录”概念。
实操建议：
- 统一用项目根路径写法：
<include src="/partials/footer.html"></include> - 或配置
root选项，例如在posthtml.config.js中设root: './src/html'，之后所有src都相对于该路径解析 - 被 include 的 HTML 片段禁止含
<html>、<body>、<head>——否则最终生成的 HTML 会出现非法嵌套，浏览器解析出错 - 如果用 Webpack，
html-loader需开启preprocessor选项，并配合html-webpack-plugin的templateParameters传参，否则<%= require(...) %>会被当纯文本输出
<template>也不该替代状态更新。复用的前提是职责清晰——结构归结构，数据归数据，样式归样式。 
