如何在Safari中为HTML5视频的Shadow DOM元素应用CSS隐藏全屏按钮

这确实是Shadow DOM的典型痛点——它的样式隔离特性虽然能避免样式冲突，但也给自定义原生组件带来了不小的麻烦。针对你要隐藏Safari HTML5视频全屏按钮的需求，这里有两个可靠的解决方案：

方法1：通过JavaScript注入样式到Shadow DOM内部 #

既然你已经在调试模式下确认了选择器的有效性，那最直接的方式就是用JS把对应的CSS代码注入到目标Shadow DOM内部，绕过样式隔离限制。

示例代码： #

// 找到页面中的视频元素
const videoElement = document.querySelector('video');

// 延迟执行，确保Safari的视频控件Shadow DOM已初始化
setTimeout(() => {
  // 获取视频控件的Shadow Root（不同版本Safari的结构可能略有差异，可在调试工具中确认）
  const shadowRoot = videoElement.shadowRoot || videoElement.querySelector('div[role="group"]')?.shadowRoot;
  
  if (shadowRoot) {
    // 创建style标签并写入隐藏全屏按钮的样式
    const customStyle = document.createElement('style');
    customStyle.textContent = `
      .controls-bar.top-left [aria-label="Enter Full Screen"],
      .controls-bar.top-left .fullscreen-button {
        display: none !important;
      }
    `;
    shadowRoot.appendChild(customStyle);
  }
}, 800); // 延迟时间可根据页面加载情况调整

小提示： #

如果页面中有多个视频元素，记得遍历所有<video>标签重复上述操作；如果Shadow DOM的嵌套结构更复杂，可在Safari调试工具中右键复制元素的完整路径，调整shadowRoot的获取逻辑。

方法2：监听DOM变化，处理动态加载的视频 #

如果你的视频是异步加载（比如通过用户交互、AJAX请求动态添加），可以用MutationObserver自动检测新出现的视频并注入样式：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      // 检查新增节点是否是视频，或包含视频元素
      const targetVideo = node.tagName === 'VIDEO' ? node : node.querySelector('video');
      if (targetVideo) {
        setTimeout(() => {
          const shadowRoot = targetVideo.shadowRoot || targetVideo.querySelector('div[role="group"]')?.shadowRoot;
          // 避免重复注入样式
          if (shadowRoot && !shadowRoot.querySelector('#custom-video-control-style')) {
            const customStyle = document.createElement('style');
            customStyle.id = 'custom-video-control-style';
            customStyle.textContent = `
              .controls-bar.top-left [aria-label="Enter Full Screen"],
              .controls-bar.top-left .fullscreen-button {
                display: none !important;
              }
            `;
            shadowRoot.appendChild(customStyle);
          }
        }, 500);
      }
    });
  });
});

// 监听整个文档的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

为什么普通CSS无法生效？ #

Shadow DOM的核心特性就是样式封装，外部样式表和页面内的<style>标签规则默认无法穿透到其内部。只有两种例外情况：

• 目标元素通过::part()选择器暴露了可样式化的部分（但Safari原生视频控件通常不会做这个处理）；
• 使用::slotted()选择器，但仅对Shadow DOM内部的<slot>元素有效，不适用于原生控件的内部按钮。

所以JavaScript注入样式是目前针对Safari原生视频控件最可靠的方案。

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