Web Components 是浏览器原生 API，含 Custom Elements、Shadow DOM 和 HTML Templates 三部分；Custom Elements 需用短横线命名并继承 HTMLElement；Shadow DOM 提供样式封装，支持 ::part() 和 :host 暴露接口；template 内容需 cloneNode 使用，内联脚本不执行。
Web Components 不是 JavaScript 的一个“功能”，而是浏览器原生支持的一组底层 API，用来创建可复用、封装良好的自定义 HTML 元素。它不依赖框架，但需要 JavaScript 驱动。
Custom Elements API：怎么定义一个自定义标签
这是 Web Components 的核心入口，通过 customElements.define() 注册新标签。必须使用短横线（-）分隔的名称（如 my-button），不能是单个单词（button 会报错），也不能含大写字母（MyButton 无效）。
常见错误现象：Failed to execute 'define' on 'CustomElementRegistry': the name "mybutton" is not a valid custom element name
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 类必须继承
HTMLElement，不能直接写对象字面量 - 生命周期钩子如
connectedCallback是异步触发的，不要在其中同步依赖父容器尺寸或样式 - 若需传参，优先用
attributeChangedCallback监听属性变化，而非 props 模式
Shadow DOM：为什么你的 CSS 不生效
Shadow DOM 提供样式和结构的封装边界。调用 this.attachShadow({ mode: 'open' }) 后，内部节点默认不可被外部 CSS 选中，外部样式也不会穿透进来。
容易踩的坑：
-
mode: 'closed'会让shadowRoot返回null，调试时查不到结构 - 想让外部样式影响内部？不行；但可以用
::part()或:host主动暴露接口 - 用
slot投影内容时，<slot></slot>本身不渲染，只作占位，别给它加 margin
HTML Templates：为什么不能直接 innerHTML 插入模板
<template></template> 标签内容不会被解析或渲染，直到你手动克隆它。直接 innerHTML 赋值会丢失事件绑定、脚本执行和 slot 行为。
正确做法：
- 用
document.getElementById('tmpl').content.cloneNode(true)获取并插入 - 模板里写
<slot name="icon"></slot>，组件内用<span slot="icon">✅</span>投影 - 避免在
<template></template>中写内联脚本——它不会执行
Web Components 真正难的不是语法，而是权衡：要不要用 :host-context() 打破封装？是否允许用户通过 slot 注入任意 HTML 导致 XSS？这些设计决策比写个 define() 调用重要得多。
