我也在找同样的东西。
问题是，<use href="#frag"引用的是同一文档中的一个元素，Shadow DOM基本上是文档中的另一个文档，就像iframe（据我所知），因此元素#frag并不存在。
我使用的是LitElement，我提出的解决方案是将主<svg>放在<ele>中，然后使用JavaScript手动将其附加到影子根目录：
（我也尝试过使用<slot>，但它们也在shadow DOM之外）

<ele>
  <svg>     
    <rect id="frag"/>
  </svg>
<ele>

然后在JavaScript中使用firstUpdated：

firstUpdated() {
  if (this.childElementCount > 0) {
    let children = this.children;
    for (let child of children) {
        child.remove();
        this.shadowRoot.append(child);
    }
  }
}

使用LitElement，您还可以指定渲染根，这将意味着阴影根（文档中的文档）永远不会创建，也应该解决这个问题。
希望这对你有用！：-D

没有。在花了几天时间解决这个问题后，我发现创建一个用于服务SVG图标的组件效果最好，如outlined by Dany Engelman in this answer。
以下是创建组件的方法：
1.创建了一个名为app-svg-icon的Web组件。
1.元件会接收属性icon、class和viewBox。
1.使用icon属性取代use，将svg项目绘制为其innerHTML。
1.可以在包含所有svg图标的全局变量中找到该图标。
换句话说，use功能被替换为包含所有svg符号的全局变量。
Web组件can be found in this Codepen。