能否通过CSS直接访问Web Component的Shadow DOM修改内部样式

你写的my-component > iframe选择器完全无法选中Shadow DOM内部的iframe元素，直接靠普通CSS穿透Shadow DOM设置内部样式的方式是不可行的。

为什么这种写法无效 #

• Shadow DOM的核心设计就是DOM和样式的强封装：Shadow Root内部的元素和外部文档的DOM树是逻辑隔离的，外部文档的常规CSS选择器无法跨越Shadow边界匹配内部元素，早年用于穿透Shadow DOM的/deep/、::shadow等选择器早已被全量废弃，目前没有原生CSS语法支持无差别穿透Shadow DOM。
• 你直接给<my-component>标签本身设置cursor: default不生效，是因为鼠标实际悬停的命中区域是Shadow DOM内部的iframe（甚至是iframe加载的内部文档元素），外层宿主标签的鼠标样式不会自动覆盖内部独立元素的样式。
• 额外注意：iframe本身是独立浏览上下文，如果iframe加载的是跨域资源，你连iframe内部的DOM都无权访问，更不可能直接修改内部元素的样式。

可行的解决方法 #

你可以根据自己对组件的控制权限选对应方案：

• 如果可以修改Web Component源码
  最规范的方案是暴露CSS自定义属性作为样式接口：在组件Shadow DOM的样式中，将cursor属性绑定到自定义变量，示例：

  /* 组件内部Shadow DOM的样式 */
  :host {
    cursor: var(--comp-cursor, pointer);
  }
  iframe {
    cursor: inherit;
  }
  

  外部使用时直接给组件传变量即可生效：

  my-component {
    --comp-cursor: default;
  }
  

  如果不需要做严格样式封装，可以在初始化Shadow Root时开启mode: 'open'，方便外部JS获取内部DOM做自定义修改。
• 如果无法修改组件源码，且组件Shadow Root为open模式
  你可以通过JS拿到组件的Shadow Root，直接给内部元素注入样式，示例：

  const comp = document.querySelector('my-component');
  // open模式下可以读取shadowRoot属性，closed模式会返回null
  const iframe = comp.shadowRoot.querySelector('iframe');
  iframe.style.cursor = 'default';
  // 如果是同域iframe，还可以在iframe加载完成后进一步修改内部元素样式
  // iframe.addEventListener('load', () => {
  //   iframe.contentDocument.body.style.cursor = 'default';
  // })
  

• 如果组件Shadow Root为closed模式、或iframe为跨域资源
  你没有权限直接修改内部样式，只能联系组件开发者增加样式配置接口，没有其他hack手段可以绕过浏览器的安全和封装限制。

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