React 中需用 focusin/focusout 事件手动切 class 实现 contentEditable 聚焦样式，因 :focus 无效；Vue 3 应用同理，须用 ref 监听 DOM 事件；新浏览器可用 :has() 纯 CSS 方案，但 Firefox 不支持。
React 中 contentEditable 元素如何加 focus 边框和阴影
直接给 contenteditable 元素加 :focus 样式是无效的——它不触发原生 focus 状态。必须用 javascript 监听 focusin / focusout 事件，手动切换 class。
- 别写
div[contenteditable]:focus { outline: 2px solid blue; }，这不会生效 - 推荐监听
focusin（冒泡版），比focus更可靠，能捕获子元素聚焦 - 加 class 时用
transition: box-shadow 0.15s, border-color 0.15s让高亮更自然 - 注意：Safari 对
contentEditable的 focus 行为有延迟，建议加tabIndex={0}显式声明可聚焦
Vue 3 的 v-model + 内联编辑器怎么同步样式状态
用 v-model 绑定文本时，输入框其实是虚拟的；真正在用的是 contentEditable 容器。样式状态不能靠表单控件那一套逻辑来驱动。
- 不要试图在
@input或@update:modelValue里切 focus class——这些事件不反映焦点变化 - 正确做法：用
onMounted+ref拿到 DOM 元素，addEventListener('focusin', ...)和addEventListener('focusout', ...) - 如果用了 Composition API 的
watchEffect去响应isEditing状态，记得这个状态必须由 focus 事件显式更新，不能靠输入行为推断 - 兼容性提示：IE 已淘汰，但旧版 Edge 可能需要
focus/blur替代focusin/focusout
纯 CSS 方案：用 :has() 实现 focus 高亮（Chrome 105+ / Safari 15.4+）
如果你只支持较新浏览器，:has() 是最干净的解法，无需 JS 干预。
- 写法示例：
div[contenteditable]:has(> *:focus) { box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; } - ⚠️ 注意：该选择器只匹配「内部有获得焦点的子元素」，所以要确保编辑内容是子节点（比如
<span></span>或文本节点），不是直接写在div上的纯文本（纯文本节点无法被聚焦） - 如果内容结构不确定，建议包裹一层
<span contenteditable="false"></span>作为容器，再让实际编辑区域是其子元素 - 目前 Firefox 尚未支持
:has()在伪类中的使用，生产环境慎用
边框与阴影容易破坏内联布局的几个细节
给内联编辑容器加 box-shadow 或增宽 border 会撑开行高、错位对齐，尤其在段落中间嵌入时特别明显。
- 优先用
outline替代border，它不占布局空间，但无法圆角或内阴影 - 若必须用
box-shadow，加box-sizing: border-box并配合margin: -2px抵消外扩（数值按 shadow 半径调整） - 避免在
display: inline元素上直接加box-shadow，改用display: inline-block+vertical-align: middle - 移动端要注意：iOS Safari 的 focus 放大行为可能让阴影被裁剪，加
-webkit-user-modify: read-write有时能缓解
