使用Element.focus()为元素设焦点时，:focus-visible样式不生效的原因是什么

问题根本原因 #

你遇到的是浏览器对:focus-visible的默认触发规则限制：默认情况下，通过JavaScript主动调用focus()方法给非原生输入类元素设置焦点时，不会触发:focus-visible匹配，只有当焦点来自键盘操作（如Tab切换、方向键导航）、或元素为原生可输入元素、或焦点触发前最近的用户交互是键盘操作时，:focus-visible才会生效。

你通过shift+tab切回元素时样式正常，正是因为此时焦点来自键盘操作；而stackoverflow代码片段可正常复现，是因为片段运行在独立iframe中，初始化焦点上下文无前置鼠标交互，部分浏览器会默认给首次JS触发的自定义元素焦点匹配:focus-visible。

影响:focus-visible生效的核心因素 #

• 焦点触发方式：键盘操作触发的焦点默认匹配:focus-visible，鼠标点击、JS主动调用focus()默认不匹配非输入类自定义元素
• 元素类型：原生<input>、<textarea>等可输入元素，即使JS调用focus()也大概率触发:focus-visible，自定义tabindex的普通元素无此默认规则
• 最近交互类型：如果用户上一步操作是键盘输入/导航，后续JS触发的焦点会继承:focus-visible状态；如果上一步是鼠标点击（比如点击编辑按钮触发行编辑），后续JS触发的焦点不会匹配
• 全局规则干扰：如果项目引入了focus-visible polyfill、或有全局CSS修改了焦点默认行为，会改变匹配逻辑
• 浏览器策略差异：不同浏览器对非表单元素、带contentEditable属性元素的焦点匹配规则有细微差异

需要排查的差异点 #

1. 触发编辑模式的操作类型：验证是否为鼠标点击编辑按钮触发的行编辑，如果是，那JS调用focus()默认不触发:focus-visible就是预期行为，可尝试用键盘操作触发编辑模式验证样式是否正常出现
2. 项目全局样式/脚本：排查是否引入了focus-visible polyfill，或有全局CSS规则修改了:focus-visible的默认匹配逻辑，比如全局设置了非标准的焦点重置规则
3. 元素的属性配置：排查自定义select组件是否带有user-select: none等属性，该属性在部分浏览器中会干扰非表单元素的:focus-visible匹配
4. 焦点调用时机：排查你的应用中调用focus()时，元素是否已完全挂载到DOM树，表格行编辑如果有延迟渲染、过渡动画，可能导致焦点调用时机异常，浏览器无法正确识别焦点状态
5. 运行上下文差异：stackoverflow代码片段运行在独立iframe中，初始化无前置焦点上下文，你的应用中触发编辑模式时，前序焦点可能在其他元素上，上下文状态不同导致匹配结果不同

无需contentEditable hack的替代方案 #

1. 调用focus()时主动指定focusVisible参数：现代浏览器已支持focus方法的新标准参数，可直接告知浏览器需要显示焦点样式：

   element.focus({
     focusVisible: true
   })
   

2. 自定义类模拟兼容旧浏览器：JS调用focus时给元素添加临时类js-focus-visible，CSS合并匹配规则即可：

   .focusable:focus-visible,
   .focusable.js-focus-visible:focus {
     border: 2px solid blue;
     box-shadow: inset 0 0 0 1px blue;
   }
   

   同时监听全局键盘事件，当用户进行键盘导航时移除该类，保持和原生:focus-visible行为一致。

内容的提问来源于stack exchange，提问作者mTv