什么是javascript的web_components【教程】

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

实操建议：

• 类必须继承 HTMLElement，不能直接写对象字面量
• 生命周期钩子如 connectedCallback 是异步触发的，不要在其中同步依赖父容器尺寸或样式
• 若需传参，优先用 attributeChangedCallback 监听属性变化，而非 props 模式

Shadow DOM：为什么你的 CSS 不生效

Shadow DOM 提供样式和结构的封装边界。调用 this.attachShadow({ mode: 'open' }) 后，内部节点默认不可被外部 CSS 选中，外部样式也不会穿透进来。

容易踩的坑：

• mode: 'closed' 会让 shadowRoot 返回

  

  null，调试时查不到结构
• 想让外部样式影响内部？不行；但可以用 ::part() 或 :host 主动暴露接口
• 用 slot 投影内容时， 本身不渲染，只作占位，别给它加 margin

HTML Templates：为什么不能直接 innerHTML 插入模板

标签内容不会被解析或渲染，直到你手动克隆它。直接 innerHTML 赋值会丢失事件绑定、脚本执行和 slot 行为。

正确做法：

• 用 document.getElementById('tmpl').content.cloneNode(true) 获取并插入
• 模板里写 ，组件内用 ✅ 投影
• 避免在 中写内联脚本——它不会执行

Web Components 真正难的不是语法，而是权衡：要不要用 :host-context() 打破封装？是否允许用户通过 slot 注入任意 HTML 导致 XSS？这些设计决策比写个 define() 调用重要得多。