web components 实现富文本工具栏组件的核心是封装为无框架依赖的自定义元素，通过 dom api 与 contenteditable 区通信；利用 definecustomelement（vue 3.2+）转化组合式逻辑，支持命令触发、状态同步、slot 扩展及 shadow dom 样式隔离。
Web Components 实现富文本工具栏组件，核心是把工具栏封装为独立、可复用、无框架依赖的自定义元素（Custom Element），通过标准 DOM API 与编辑器区域通信，不绑定 Vue/React 等特定框架。
基于 defineCustomElement 封装工具栏
Vue 3.2+ 提供 defineCustomElement，可将组合式逻辑转为原生 Custom Element。工具栏本身不直接操作内容，而是监听用户点击，向关联的富文本编辑区域（如 contenteditable 元素）发送命令：
- 注册自定义元素，例如
<rich-text-toolbar></rich-text-toolbar> - 接收外部传入的
editorRef或目标容器选择器（如target="#my-editor"） - 内部按钮绑定
click事件，调用document.execCommand()（兼容旧版）或更现代的getSelection()+document.execCommand()替代方案（如insertHTML、formatBlock） - 支持动态启用/禁用按钮（如根据光标位置判断是否可加粗）
与 contenteditable 编辑区解耦通信
工具栏不持有编辑内容，只负责触发格式操作。关键在于建立可靠通信机制：
- 通过
shadowRoot外部查找目标编辑器（如this.ownerDocument.querySelector(this.target)） - 监听编辑器的
focus/input事件，同步更新按钮激活状态（例如选中文字时才高亮「加粗」按钮） - 使用
CustomEvent触发事件（如toolbar:command），由编辑器组件订阅并执行对应逻辑，避免强耦合 - 支持 slot 插入自定义按钮，保持扩展性（如插入「签名」、「表格」等业务按钮）
样式隔离与交互细节处理
Web Components 天然支持 Shadow DOM，这对工具栏很关键：
- 所有按钮图标、hover 效果、下拉菜单样式都封装在 Shadow DOM 内，不污染全局 CSS
- 下拉类功能（如字体选择、字号）需手动管理 focus 和键盘导航（
Tab、ArrowUp/Down），确保无障碍可用 - 响应式布局建议用
@media+slot分组控制显示（如移动端折叠为弹出菜单） - 避免直接修改
document.execCommand已废弃 API；推荐配合InputEvent监听 +Range操作实现更可控的格式化
实际可运行的最小结构示例
一个基础工具栏组件（rich-text-toolbar.ce.vue）可这样组织：
- props 接收
target（字符串选择器）和commands（如['bold', 'italic', 'link']） - setup 中用
onMounted查找目标编辑器，并绑定selectionchange更新按钮状态 - 模板里每个按钮
@click="runCommand('bold')"，内部调用document.execCommand('bold')或派发自定义事件 - 导出为
defineCustomElement(...)后，在任意 HTML 页面中直接写：<rich-text-toolbar target="#editor"></rich-text-toolbar><div id="editor" contenteditable></div>
