web components 是浏览器原生标准，含 custom elements 和 shadow dom；需用短横线命名、继承 htmlelement、在 connectedcallback 中渲染和 attachshadow；启用样式隔离须用 attachshadow({mode:'open'})；:host 和 ::slotted 有选择器限制；需注意兼容性与 ssr 问题。
Web Components 不是某个函数或库，而是浏览器原生支持的一套标准组合，核心就两块：Custom Elements 和 Shadow DOM。它们能让你封装可复用、样式隔离、行为独立的 HTML 元素，不依赖框架。
怎么注册一个自定义元素（customElements.define）
必须用短横线分隔的名称（如 my-button），不能是单个单词或大驼峰；且必须继承 HTMLElement 或其子类。
- 注册前不能在 HTML 中提前使用该标签，否则会报
Failed to execute 'define' on 'CustomElementRegistry': the name "xxx" has already been used - 构造函数里不能直接操作
this.innerHTML，要等connectedCallback触发后再渲染（否则 SSR 或动态插入时可能失效） - 若需传参，建议通过
attributeChangedCallback监听属性变更，而非在constructor里读取this.getAttribute
class MyButton extends HTMLElement {
static get observedAttributes() {
return ['label', 'disabled'];
}
connectedCallback() {
this.innerHTML = `<button>${this.getAttribute('label') || 'Click me'}</button>`;
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'disabled') {
this.querySelector('button').disabled = newValue !== null;
}
}
}
customElements.define('my-button', MyButton);
如何启用真正的样式隔离（attachShadow）
Shadow DOM 的本质是创建一个与主文档 DOM 树分离的渲染上下文，外部 CSS 默认进不去，内部样式也不会泄漏出去——但前提是正确调用 attachShadow 并传入 { mode: 'closed' } 或 { mode: 'open' }。
ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键
-
mode: 'closed'会让shadowRoot无法被 JS 访问（el.shadowRoot === null），调试困难，一般只用于高安全场景 -
mode: 'open'是默认推荐值，允许开发者通过el.shadowRoot检查和测试 - 不要在
constructor中调用attachShadow，应在connectedCallback中执行，避免重复 attach 导致Failed to execute 'attachShadow' on 'Element': This element already has a shadow root -
<slot></slot>是内容分发的关键，没有它，外部传入的子节点不会显示在 shadow 内
class MyCard extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style> :host { display: block; border: 1px solid #ccc; padding: 12px; } </style><div><slot></slot></div>
`;
}
}
customElements.define('my-card', MyCard);
为什么 :host 和 ::slotted() 不能乱用
Shadow DOM 内部样式作用域有限，:host 匹配组件自身（即 <my-card></my-card> 这个标签），::slotted(selector) 只能作用于被 <slot></slot> 投影出去的**外部节点**，且只支持简单选择器（不能写 ::slotted(div p)）。
-
:host(.active)有效，:host > div无效（伪类外不能跟后代选择器） -
::slotted(*)可以匹配所有插槽内容，但::slotted(.foo .bar)会静默失败 - 若需从外部控制 shadow 内样式，应暴露 CSS 自定义属性（
--my-card-bg），并在 shadow 内用var(--my-card-bg, #fff)
兼容性与构建时要注意什么
现代 Chrome/Firefox/Safari/Edge 均已原生支持，但 IE 完全不支持，iOS Safari 10.3+ 才开始支持 attachShadow；若需兼容旧环境，得引入 @webcomponents/webcomponentsjs polyfill。
- polyfill 会污染全局，比如把
customElements.define改成异步执行，导致注册顺序敏感 - Vite/Webpack 等工具默认不处理
.html模板字符串中的<template></template>，建议把 shadow 内容写成 JS 字符串或用innerHTML赋值，避免构建时报错 - 服务端渲染（SSR）时，shadow DOM 不会被渲染出来，需配合 hydrate 逻辑或降级为普通 DOM
customElements.define，而是想清楚哪些逻辑该放进 shadow，哪些该暴露为属性或事件，以及什么时候该用 slot 而不是 props —— 这些边界一旦模糊，组件就会变得既难用又难维护。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
