报 DOMException 说明标签名不合规，必须含且仅含一个连字符、小写字母开头、非保留字，如 my-button ✅，mybutton ❌、MyButton ❌、html-button ❌；需用正则 /^[a-z][a-z0-9]*-[a-z0-9-]*[a-z0-9]$/ 预校验。
customElements.define() 报 DOMException 怎么办
直接报错 DOMException: Failed to execute 'define' on 'CustomElementRegistry'，基本就是标签名不合规。浏览器强制要求自定义元素名必须含且仅含一个连字符（-），不能以数字开头，也不能是保留字。
-
my-button✅ 合法；mybutton❌ 无连字符；MyButton❌ 大驼峰不被识别；html-button❌html是保留名 - 注册前务必检查：用正则
/^[a-z][a-z0-9]*-[a-z0-9-]*[a-z0-9]$/粗筛一遍，避免运行时崩溃 - 若用构建工具生成组件名（比如从文件名推导），需在打包脚本里加校验逻辑，否则 CI 流程会卡在 define 阶段
HTML 模板怎么和构建流程打通
纯 HTML 模板（<template id="xxx">）无法被 Vite/Webpack 直接打包进 JS bundle，容易导致生产环境找不到模板节点。必须显式声明依赖或提前注入。
- 在组件类中用
document.getElementById('xxx')获取模板，但该 ID 必须确保全局唯一，且 HTML 文件已加载 —— 这在单页应用里常因加载顺序出问题 - 更可靠的做法：把模板字符串写进 JS，用
new DOMParser().parseFromString(...)或直接innerHTML = `<div>...</div>`注入 shadow root（注意 XSS 风险） - 如果坚持用外部
<template>，需在构建配置中把含 template 的 HTML 文件列为public资源，并确保它被复制到dist根目录，再通过fetch('/template.html')动态加载（增加异步开销）
构建后组件怎么发布到 CDN 或静态托管
原生 Web Components 不依赖框架，但发布时仍要处理路径、资源引用和跨域限制，否则 import('./my-button.js') 会 404 或 CORS 失败。
- 打包输出必须为 ES Module 格式（
type="module"），Vite 默认支持；Webpack 需设output.libraryType: 'module' - 所有 CSS 和图片资源需内联进 JS（如 base64）或明确指定
base路径，否则构建后相对路径失效 - 上传前检查
dist/my-button.js是否能被浏览器直接执行：新建 HTML，写<script type="module" src="https://cdn.example.com/my-button.js"></script>，再放<my-button></my-button>—— 控制台无报错才算通路
attributeChangedCallback 为什么没触发
改了 el.setAttribute('size', 'large')，但组件内部毫无反应，大概率是 observedAttributes 没声明，或者值类型没转换。
立即学习“前端免费学习笔记（深入）”；
- 必须显式定义
static get observedAttributes() { return ['size', 'disabled']; }，漏一个就收不到变更 -
attributeChangedCallback的newValue永远是字符串，this.size = newValue会把数字属性存成字符串，后续比较出错；应写this.size = parseInt(newValue) || newValue - 首次初始化时 HTML 属性已存在，但
attributeChangedCallback不会触发 —— 需在connectedCallback中手动读取this.getAttribute('size')补一次
真正麻烦的不是写组件，而是让组件在任意构建流程里都能被正确识别、加载、响应。路径、命名、生命周期钩子执行时机，三者只要一个偏移，整个组件就变成“看起来能跑，实际总差一点”。
