Question

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

例如


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

shadowDom和SVGUseElement的href之间的交互是（替代）特定位置吗？

Answer 1

我一直在寻找完全一样的东西。
问题是，在<use href="#frag"引用同一文档中的元素的情况下，Shadow DOM基本上是文档中的另一个文档，例如iframe（据我所知），因此元素{ {1}}不存在。

我正在使用LitElement，我想出的解决方案是将主#frag放在<svg>内，并使用JavaScript手动将其附加到影子根目录：
（我也尝试过使用<ele>，但它们也在影子DOM之外）

<slot>

然后在JavaScript中使用firstUpdated：

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

使用LitElement，您也可以Specify the render root，这将意味着永远不会创建卷影根（文档中的文档），并且也应该解决该问题。

希望对您有用！ :-D