锚标签 <a id="jump"> 在 shadow dom 中带有哈希值

Question

我想在使用 shadow DOM 的自定义元素中使用带有哈希 URL 的锚元素。我希望浏览器向下滚动到该锚点，但它没有这样做（至少是 Chrome）。

细节：

我有一个像这样的 index.html：

...
<a href="#destinationInsideShadowDOM">Jump</a>
...
<my-custom-element></my-custom-element>
...

另一个用于自定义元素的 html 文件，其中包含锚点：

<template id="my-custom-element">
   ...
   <a id="destinationInsideShadowDOM"></a>
   ...
</template>

当我单击 index.html 中的链接时，我希望浏览器向下滚动到该锚点。

当我将锚点移动到自定义元素之外的 index.html 时，它可以工作，但不能在内部使用。

Answer 1

进入控制台并输入以下内容：

document.getElementById('destinationInsideShadowDOM')

结果是null因为具有该 ID 的元素不属于该文档。它属于自定义元素的shadowRoot。

正如 @treeno 在评论中提到的，您可以使用Element.scrollIntoView()来获得您想要的行为。