SVG使用元素href引用shadowRoot之外的元素？答案

【问题标题】：SVG use element href referring to element outside of shadowRoot?SVG使用元素href引用shadowRoot之外的元素？
【发布时间】：2020-09-23 13:19:20
【问题描述】：

有没有办法让 shadowRoot 内部的 SVGUseElement 引用周围 html 文档中 shadowRoot 的 outside 片段？

例如


<ele>
    shadow
        <svg...
            <use href="#frag"...
</ele>
<svg>     
    <rect id="frag"...
</svg>

ShadowDom 和 SVGUseElement 的 href 之间的交互是否相关/可选？

【问题讨论】：

我相信这已在 Firefox 77 中修复。
嗯。这一刻，引用 shadowTree 之外的片段在 FF/Chrome/Safari 中始终是不可行的。（就个人而言，我认为这种行为作为默认行为更可取/不要认为这只是一个错误。）

标签： html svg shadow-dom

【解决方案1】：

我一直在寻找完全相同的东西。
问题是你有 <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 Specify the render root 这将意味着永远不会创建影子根（文档中的文档）并且应该也可以解决问题。

希望对你有用！ :-D

【讨论】：

谢谢，但我不能接受有几个原因：为了澄清，据了解，影子根与文档的其余部分是隔离的，并且 SR 内的片段引用不能引用 - - 一般。在某些情况下，抓取 svg 并注入无疑是一种潜在的解决方法，但 use 元素的主要目的是重新呈现另一个元素，而不必以编程方式创建额外的副本——如果我们可以这样做，我们可能会一起放弃“使用”。如果我们想要现场演示，那可能并不理想。
另外，越过阴影根是问题的核心，所以不使用阴影是不行的。