构造函数必须首行调用super()，仅执行super()、attachinternals()、attachshadow()；初始化逻辑应移至connectedcallback中，此时元素已挂载，可安全操作dom、读属性、绑定事件。
构造函数必须调用 super()
不写 super()，实例化直接报错：Failed to construct 'XXX': Please use the 'new' operator。浏览器要求所有继承自 HTMLElement 或其子类的构造函数，必须在第一行调用 super() —— 这不是可选建议，是强制规范。
常见错误是把初始化逻辑全堆进构造函数里：查 DOM、绑定事件、读属性、渲染 Shadow DOM……这些都该挪到 connectedCallback 里做。构造函数只干三件事：super()、this.attachInternals()（如需表单参与）、this.attachShadow()（如需 Shadow DOM）。
-
super()必须是构造函数第一句，否则后续所有 DOM 方法（如querySelector）都不可用 - 不能在构造函数里访问
this.innerHTML或this.children，此时元素还没挂载到文档，DOM 树为空 - 若要支持表单关联，
this.attachInternals()必须在构造函数中调用，且只能调一次
connectedCallback 才是真正干活的地方
元素被插入 DOM 时才触发 connectedCallback，这时才能安全地操作子节点、监听事件、读取属性、设置初始值。很多初学者误以为“写了构造函数就万事大吉”，结果发现 getAttribute('value') 总是 null，就是因为属性是在 HTML 解析后才赋值的，而构造函数执行时属性还没生效。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 在
connectedCallback中调用this.querySelector('input')才能拿到真实子元素 - 需要响应属性变化（比如
disabled切换），必须配合static observedAttributes = ['disabled']+attributeChangedCallback - 如果用了 Shadow DOM，模板插入、事件监听、初始渲染都放在这里，而不是构造函数
扩展现有元素时，构造函数必须继承对应内置类
想扩展 <canvas></canvas> 就得继承 HTMLCanvasElement，扩展 <p></p> 就得继承 HTMLParagraphElement —— 绝对不能统一继承 HTMLElement。否则 getContext()、textContent 等原生方法会失效，浏览器根本不认你这个元素是 canvas 或 paragraph。
- 继承错类 → 原生属性/方法全部不可用（
canvas.width返回undefined） - 即使注册时写了
{ extends: 'canvas' }，类本身没继承HTMLCanvasElement，照样无效 - 使用时必须写
<canvas is="my-canvas"></canvas>，漏掉is属性或大小写不一致，自定义行为完全不触发
customElements.get() 只返回已注册的构造函数
customElements.get('my-button') 不会触发定义，也不会自动加载代码；它只查注册表——没调过 customElements.define('my-button', MyButton)，就一定返回 undefined。这常被误用于“动态检测组件是否可用”，但实际只是个同步查表操作。
- 返回值是构造函数本身，可用来
new实例，也可检查是否存在：if (customElements.get('my-input')) { ... } - 名字必须完全匹配：连字符、大小写、是否带
is值，一个字符都不能差 - 不能靠它“触发加载”或“等待定义完成”，异步场景下需配合
customElements.whenDefined('my-button')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
