Shadow Root中用户代理样式覆盖继承样式，如何实现外部样式生效？

用户代理样式会覆盖Shadow Root中的继承样式。

不使用Shadow DOM时（代码正常运行） #

body {
  color: white;
  background: #532c79;
}
  
a {
  color: white;
}

<a href="#">HELLO</a>

使用Shadow DOM时（代码无法正常运行） #

原因：ShadowRoot内部无法获取外部的a选择器样式；尽管body的color是继承属性，但用户代理样式优先级更高，导致该样式无法生效。

const root = document.body.attachShadow({ mode: 'open' })

root.innerHTML = '<a href="#">HELLO</a>'

body {
  color: white;
  background: #532c79;
}
  
a {
  color: white;
}

这意味着将代码重构为使用ShadowRoot会面临样式适配问题。

将a选择器规则放入单独的样式表，再确保每个ShadowRoot通过<style>内的@import、<link rel="stylesheet">或root.adoptedStylesheets导入该样式表，这是实现样式生效的唯一合法方式吗？

我还尝试通过猴子补丁修改attachShadow方法，让它自动为每个ShadowRoot添加样式，但这种方法不够规范，实现复杂且存在浏览器兼容问题（比如Safari暂不支持可构造样式表）。

猴子补丁示例代码 #

// 在创建任何ShadowRoot前、所有应用代码执行前进行猴子补丁
{
  const sheet = new CSSStyleSheet()
  sheet.replaceSync('a { color: white; }')

  const original = Element.prototype.attachShadow
  Element.prototype.attachShadow = function attachShadow(...args) {
    const root = original.call(this, ...args)

    root.adoptedStyleSheets = [sheet]
    return root
  }

  const {get: originalGet, set: originalSet} = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'adoptedStyleSheets')

  Object.defineProperty(ShadowRoot.prototype, 'adoptedStyleSheets', {
    enumerable: true,
    configurable: true,
    get: originalGet,
    set: function(array) {
      if (!array.includes(sheet)) array.unshift(sheet)
      originalSet.call(this, array)
    },
  })
  // 或者用Proxy包装以覆盖所有场景
}

// 后续正常创建ShadowRoot
const root = document.body.attachShadow({ mode: 'open' })

root.innerHTML = '<a href="#">HELLO</a>'

body {
  color: white;
  background: #532c79;
}

可以看到这种方法已经很复杂，且还未覆盖所有边缘情况，可能需要像Chrome那样实现自定义Proxy包装器。

是否存在更优的解决方案？

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