自定义元素必须继承htmlelement或对应内置类，独立元素用连字符命名并直接使用，扩展现有元素必须用is属性且值与define参数严格一致，否则属性、方法失效；需polyfill支持旧浏览器，属性需手动映射。
直接用 customElements.define() 注册类，就能让浏览器识别新标签——但关键不在“能不能用”，而在“用对没用错”。尤其当你要扩展现有元素（比如 <canvas></canvas> 或 <p></p>）时，漏掉 is 属性会导致属性访问失败、事件不触发、甚至渲染异常。
定义自定义元素必须继承 HTMLElement 或其子类
哪怕只是加个 click 日志，也得从标准基类出发。继承 HTMLElement 是底线，否则无法接入 DOM 生命周期钩子（如 connectedCallback），也无法被 customElements.define() 接受。
- 独立元素：必须继承
HTMLElement，标签名含连字符（如my-card），直接写<my-card></my-card> - 内置元素扩展：必须继承对应内置类（如
HTMLCanvasElement），注册时传{ extends: 'canvas' }，使用时必须用原生标签 +is属性（<canvas is="render-area"></canvas>） - 漏掉
super()在构造函数里？实例化会直接报Failed to construct 'XXX': Please use the 'new' operator
扩展现有元素时，is 属性不是可选，是强制要求
浏览器解析 HTML 时，只认原生标签名。你定义了 class RenderArea extends HTMLCanvasElement，但写 <render-area width="400"></render-area>，浏览器根本不会把它当 canvas 处理——width、height、getContext() 全部不可用，render-area.width 返回 undefined。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法只有这一种：
<canvas is="render-area" width="400" height="300"></canvas> -
is值必须和customElements.define()第一个参数完全一致（大小写、连字符） - 不能混用：既写
<render-area></render-area>又加is，浏览器会忽略自定义类，当作未知元素处理
polyfill 在旧浏览器中不是“锦上添花”，而是“能否运行”的分水岭
Chrome 67+、Firefox 63+、Safari 10.1+ 原生支持 v1 规范，但 IE 和旧版 Edge 完全不支持。如果目标用户包含这些环境，不引入 polyfill 就等于功能直接消失。
- 推荐用官方维护的
@webcomponents/custom-elements，CDN 地址：https://unpkg.com/@webcomponents/custom-elements@1.1.2/custom-elements.min.js - 必须在任何
customElements.define()调用之前加载 polyfill，否则注册失败且无提示 - 注意 polyfill 加载时机：放在
末尾或开头，避免 DOM 解析完成后再加载导致元素未升级
最容易被忽略的一点：自定义元素的属性映射不是自动的。你写了 <my-input value="test"></my-input>，但类里不会自动拿到 this.value ——必须手动在 attributeChangedCallback 里监听 value 属性变化，再同步到内部状态或 DOM。这和原生 input 的行为差异，是很多封装失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
