Lit WebComponent全屏异常：fullscreenElement不符且fullscreenEnabled恒为false

为什么document.fullscreenElement指向祖先WebComponent，而非当前调用组件 #

这是Shadow DOM的封装特性和全屏API的交互逻辑导致的：

• Lit WebComponent默认用Shadow DOM隔离内部DOM，当你在Shadow DOM范围内的元素（包括被嵌套在其他组件Shadow DOM里的当前组件）调用requestFullscreen()时，浏览器会把全屏状态关联到该元素所在Shadow DOM的宿主元素——也就是最近的祖先WebComponent。
• 全屏API设计时只暴露全局文档可访问的元素，Shadow DOM内部的元素属于私有上下文，无法直接成为document.fullscreenElement的指向对象，所以浏览器会自动向上查找，把最顶层的可访问宿主标记为全屏元素。

举个实际场景：如果你的<my-component>嵌套在<parent-component>的Shadow DOM里，当<my-component>调用this.requestFullscreen()，document.fullscreenElement会指向<parent-component>，而非当前组件本身。

为什么document.fullscreenEnabled始终为false #

这个属性返回的是当前文档是否允许使用全屏功能，和当前是否处于全屏状态无关。它恒为false通常有这几个原因：

1. 非HTTPS环境：除了localhost这类本地开发环境，多数浏览器要求全屏API必须在HTTPS协议下运行，否则直接禁用，导致document.fullscreenEnabled返回false。你的临时方案能生效，大概率是浏览器对本地HTTP环境的宽松处理，但正式部署到HTTPS以外的环境会失效。
2. 上下文或权限限制：
   • 如果组件被嵌入在<iframe>中，但iframe没加allowfullscreen属性，会导致document.fullscreenEnabled为false。
   • 浏览器的全屏权限被用户或系统禁用（比如浏览器设置里关掉了网站的全屏权限）。
3. 过早访问属性：如果在组件生命周期早期（比如constructor、connectedCallback初始阶段）访问document.fullscreenEnabled，此时文档权限还没初始化完成，会得到错误的false值。建议在用户交互触发的回调里访问（比如点击事件处理函数）。

更优雅的解决方案 #

既然直接判断this === document.fullscreenElement不可行，你可以用这些方式优化：

• 内部维护状态：在组件里加一个布尔变量（比如isFullscreen），调用全屏切换方法时同步更新这个变量。
• 监听全屏事件：通过fullscreenchange事件同步组件状态：

  connectedCallback() {
    super.connectedCallback();
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  }
  
  disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  }
  
  handleFullscreenChange = () => {
    // 根据嵌套情况，判断全屏元素是否是当前组件或其宿主
    this.isFullscreen = document.fullscreenElement === this || document.fullscreenElement === this.getRootNode().host;
  }
  
  toggleFullscreen() {
    if (this.isFullscreen) {
      document.exitFullscreen();
    } else {
      this.requestFullscreen();
    }
  }
  

• 递归检查祖先链：如果组件可能多层嵌套，可以递归检查document.fullscreenElement是否是当前组件的祖先宿主：

  isCurrentElementFullscreen() {
    let current = document.fullscreenElement;
    while (current) {
      if (current === this) return true;
      current = current.shadowRoot?.host;
    }
    return false;
  }
  

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