如何通过JS为元素设置:target伪类且不修改URL哈希？

在个人网站部署时钟小组件，需要元素被激活时立即触发自定义的:target动画，全程不修改URL哈希值。
已知可以通过编写逻辑，在组件展示时直接为元素播放对应:target动画，但需求是直接操作元素，让元素原生具备:target伪类状态，实现和URL携带哈希完全一致的效果，且不触发URL变更。
已知Firefox DevTools基于HTML和JS实现，想了解它的伪类设置功能实现原理。

JS逻辑 #

function initialize() {
  // 此处需要实现给目标元素应用:target伪类的逻辑
}
document.addEventListener('DOMContentLoaded', initialize)

CSS样式 #

/* :target 对应动画 */
:target {
    animation-name: hervorhebungWegenHash; 
    animation-duration: 10s; 
    animation-timing-function: linear; 
    animation-fill-mode: both; 
}
@keyframes hervorhebungWegenHash {
    2% {
        color: black;
        background-color: orange;
    }
}

HTML结构 #

<iframe style="position:fixed;top:0px;left:0px;width:120px;height:120px;border:1px solid #4682b4;border-radius:50%;pointer-events:none;overflow:hidden;" id="uhr" src="/widgets/uhr">&nbsp;</iframe>

<a title="copied 2022-05-26" style="position:absolute;top:125px">This clock widget reference implementation is from community Q&A.</a>

• 访问对应站点，在页面不聚焦文本输入框的状态下直接输入uhr即可查看动画效果
• 也可以在主页URL后拼接#page，此时页面中间整块内容会变为橙色，约9秒内渐变为蓝色

普通JS无法手动设置原生:target状态的原因 #

:target是浏览器渲染内核层面，根据当前URL哈希片段、文档滚动目标自动计算维护的内置伪类状态，Web标准没有给普通网页上下文暴露修改这个状态的API。前端JS只能通过document.querySelector(':target')读取当前匹配:target的元素，没有权限手动修改元素的原生伪类标记。

DevTools强制伪类状态的实现原理 #

开发者工具不属于普通网页的运行环境，它拥有浏览器内核的特权访问权限：

• DevTools的前端界面虽然用HTML/JS开发，但它和浏览器渲染进程之间通过专用的内部调试协议通信，这套协议不对普通网页开放
• 当你在DevTools中给元素勾选强制:hover、:active、:target这类伪类时，DevTools会通过调试协议给内核发送专属指令，直接修改渲染引擎内部维护的元素伪类状态标记，这个标记的优先级高于浏览器自动计算的默认伪类状态，不需要修改URL、不需要触发用户交互就能生效
• 普通站点的JS代码运行在沙箱环境中，完全没有权限调用这套内部接口，因此无法复现DevTools的强制伪类能力

无URL变更的动画实现方案 #

不需要强行操作原生:target状态，只需要给CSS选择器扩展一个自定义类，和:target共用同一套动画规则即可，最终表现和原生:target触发完全一致：

1. 修改CSS，增加自定义类选择器：

   :target,
   .force-target {
       animation-name: hervorhebungWegenHash; 
       animation-duration: 10s; 
       animation-timing-function: linear; 
       animation-fill-mode: both; 
   }
   

2. 在JS逻辑中，需要触发动画时直接给对应元素加上这个类即可，动画结束后可按需移除类方便下次触发：

   function initialize() {
     const clock = document.getElementById('uhr');
     clock.classList.add('force-target');
     // 动画时长10秒，结束后移除类
     setTimeout(() => clock.classList.remove('force-target'), 10000);
   }
   document.addEventListener('DOMContentLoaded', initialize)
   

这个方案不需要修改URL，不需要依赖任何非标准API，动画效果和原生哈希触发完全一致。

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