Web Components是浏览器原生支持的封装机制，核心为Custom Elements和Shadow DOM；自定义元素名须含短横线以防命名冲突，Shadow DOM推荐mode:'open'以利调试，attributeChangedCallback仅响应observedAttributes声明的属性变更。
Web Components 不是“另一种前端框架”，它是浏览器原生支持的封装机制——只要浏览器支持 customElements.define 和 attachShadow，你就能直接用纯 HTML/JS 封装出真正隔离、可复用的 UI 单元。
为什么自定义元素名必须带短横线？
这是浏览器强制的语法校验规则，目的是避免未来 HTML 标准新增原生标签时产生命名冲突。比如 my-button 合法，button、MyButton、mybutton 都会抛错：Failed to execute 'define' on 'CustomElementRegistry': The name "mybutton" is not a valid custom element name。
实际开发中容易忽略的点：
- 连字符不能出现在开头或结尾（
-my-btn或my-btn-无效） - 不能只含数字或纯字母（
123、abc不合法） - 大小写不敏感，但惯例全小写 + 连字符（
data-input-field而非DataInputField）
Shadow DOM 的 mode 选 open 还是 closed？
绝大多数场景该用 mode: 'open'。它允许外部 JS 通过 el.shadowRoot 访问影子树，方便调试、测试和集成（比如 Puppeteer 自动化、Jest 测试中查询内部按钮）。
mode: 'closed' 会屏蔽 shadowRoot 属性返回 null，看似更“封闭”，但代价是：无法在 DevTools 中展开查看结构、无法用 querySelector 定位内部节点、第三方工具链基本失效。除非你明确需要阻止任何外部探测（如金融类组件防样式劫持），否则别用 closed。
注意：attachShadow 只能调用一次，重复调用会报错：Failed to execute 'attachShadow' on 'HTMLElement': This element already has a shadow root。
attributeChangedCallback 不触发？检查这三点
这个回调常被误以为“监听所有属性变化”，其实它只响应你在 observedAttributes 静态 getter 中显式声明的属性，且仅对**通过 setAttribute / removeAttribute / 元素标签内写死**的方式生效。JS 直接赋值 el.disabled = true 不会触发。
常见排查项：
- 确认
static get observedAttributes()返回的是字符串数组，不是对象或单个字符串 - 确保属性名完全匹配（
'disabled'≠'Disabled'） - 检查是否在
constructor中就修改了属性（此时connectedCallback尚未执行，回调不会立即运行）
示例：想监听 loading 布尔属性，必须写成 <my-button loading></my-button> 或 el.setAttribute('loading', '')，写成 el.loading = true 是无效的。
template 标签克隆后，内部事件监听器丢失？
直接用 template.content.cloneNode(true) 插入 Shadow DOM 是安全的，但如果你把 <template></template> 放在页面 body 内，又用 document.querySelector 拿到它再克隆——要注意：模板内容在克隆前若已被解析执行（比如里面有 <script></script>），可能已污染全局作用域或提前绑定错误上下文。
更稳妥的做法：
- 把
<template id="xxx"></template>放在或组件 JS 文件顶部，确保它在组件定义前就存在 - 在
constructor或connectedCallback中动态创建 template（避免依赖 DOM 加载顺序） - 不要在 template 内写
<script></script>，逻辑全部收进 class 方法里
另外，slot 不是“占位符”而是“出口”，内容由父级提供；如果没传内容，<slot></slot> 位置就是空的——这点和 Vue/React 的默认插槽行为一致，但容易误以为“没渲染出来是 bug”。
真正难的不是写一个能跑的 Web Component，而是决定哪些逻辑该放进组件内部、哪些该暴露为属性或事件。比如主题色该用 CSS 自定义属性传，还是用 color 属性控制？加载状态该靠布尔属性驱动，还是提供 startLoading() 方法？这些边界一旦模糊，组件就从“可复用”滑向“难维护”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
