为何:focus-within伪类对iframe子元素不生效？有无纯CSS解决方案？

纯CSS方案是否存在？ #

不存在，目前没有纯CSS方法可以让iframe内部元素获得焦点时，触发父元素的:focus-within伪类。

原因分析 #

1. 浏览上下文隔离：iframe是独立的浏览上下文，其内部文档与父页面文档属于完全分离的DOM环境。CSS选择器（包括:focus-within）仅能作用于当前浏览上下文的DOM树，无法跨上下文感知元素状态。
2. :focus-within的生效逻辑：:focus-within的触发条件是元素本身或其当前文档DOM树内的后代元素获得焦点。但iframe内部的DOM节点不属于父页面的DOM树，父页面CSS无法追踪到iframe内部的焦点变化。
3. 焦点事件的隔离性：浏览器对焦点事件的处理按浏览上下文隔离，iframe内部的焦点事件不会冒泡到父页面的DOM元素上，因此父元素无法通过CSS感知到iframe内的焦点状态。

替代方案（非纯CSS） #

如果需要实现类似效果，可通过JavaScript完成：

• 监听iframe的load事件，获取其内部文档对象
• 给iframe内元素添加focus和blur事件监听
• 获焦时给父div添加自定义类，失焦时移除该类，再用CSS设置对应样式

div.focused {
  background-color: green;
}

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.addEventListener('focus', () => {
    document.querySelector('div').classList.add('focused');
  }, true);
  iframeDoc.addEventListener('blur', () => {
    document.querySelector('div').classList.remove('focused');
  }, true);
});

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