window.document.querySelector能否访问ShadowDOM？代码异常选中iframe内标签疑问

1. 为何能访问到iframe内的ShadowDOM元素？ #

只有两种情况会让主文档拿到iframe里的ShadowDOM元素：

• iframe与主文档同域：跨域iframe的内容完全隔离，主文档连contentWindow都碰不到，但同域时主文档可以直接访问iframe的contentDocument和DOM结构。
• ShadowDOM为开放模式：如果iframe内的ShadowDOM是通过element.attachShadow({ mode: 'open' })创建的，外部就能通过element.shadowRoot访问其内部元素；要是用mode: 'closed'创建，外部根本拿不到shadowRoot，更别说里面的meta标签。

还有一种极端情况：iframe内的元素被主文档的JS手动移动/复制到了主文档的DOM树里，这种情况下它相当于主文档自己的元素，自然能被querySelector找到。

2. 为何主文档head里的元素没被优先选中？ #

querySelector是按文档深度优先遍历顺序找第一个匹配的元素。如果iframe的ShadowDOM里的meta先被匹配到，只有两种可能：

• 代码无意中开启了ShadowDOM穿透查询：部分现代浏览器支持querySelector的第二个参数{ includeShadowDom: true }，开启后会遍历所有开放的ShadowDOM。如果主文档head里的meta在遍历顺序上晚于iframe ShadowDOM里的（比如iframe的ShadowDOM挂载在主文档body最前面，而主文档的meta在head末尾），就会先匹配到iframe里的。
• 主文档head里的meta[name="temp_role"]不存在/被移除了：这种情况下querySelector会继续查找其他区域的匹配元素，刚好找到了iframe ShadowDOM里的。

3. 指定document.head后仍能访问到iframe的元素？ #

这说明iframe的ShadowDOM是挂载在document.head内部的某个元素上的。比如主文档head里有个<div id="host"></div>，然后通过JS给这个div挂载了开放模式的ShadowDOM，而这个ShadowDOM里的内容来自同域iframe（比如把iframe.contentDocument里的meta复制到了这里）。此时document.head.querySelector如果开启了ShadowDOM穿透，就会遍历head下所有元素的开放ShadowDOM，自然能找到里面的meta。

修复方案 #

要确保只选中主文档head里的首个meta标签，最稳妥的写法是：

const getDisplayLocation = () => {
  // 仅在主文档head内查询，不穿透ShadowDOM
  const meta = document.head.querySelector('meta[name="temp_role"]');
  return meta ? meta.content : ''; // 增加空值判断避免报错
};

如果浏览器默认开启了ShadowDOM穿透（某些特殊环境或第三方库可能修改这个行为），可以手动关闭：

const getDisplayLocation = () => {
  const meta = document.head.querySelector('meta[name="temp_role"]', { includeShadowDom: false });
  return meta ? meta.content : '';
};

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