Question

是否可以创建一个将用作聚合物锚的元素。例如，

<template repeat="{{ content in contentitems }}">
    <div id="{{ content.id }}">{{content.stuff}}</div>
</template>

是否可以创建指向内容#id锚点的超链接，如http://example.com/#someid

或者，我们可以使用querySelector查询该元素，如下所示，然后在必要时使用JavaScript将其滚动到视图中。我不是必须使用JS路由器来锚定超链接吗？

scrollIntoViewFunc(document.querySelector("html /deep/ #someid"))

这是我想要工作的实际网址：http://megawac.github.io/status-whiskey/#status-408

Answer 1

Web组件之神（又名Blink工程师）已经确定，阴影根内的锚点不会像在主文档中那样自动滚动到视图中。出于这个原因，我相信你必须做一些类似于你在JavaScript中处理这个问题的事情。

经过简单的搜索，我无法在spec中找到对此问题的引用，它确实需要在某处拼写出来。

如果您想出一般解决方案，请将其优化并分享回社区。 = P

Answer 2

让我们假设你有一个simple-element，其中包含一些以id为主要内容的子元素：

<simple-element>
    <div id="anchor1"></div>
    <div id="anchor2"></div>
</simple-element>

然后，当哈希值发生变化时，您可以为scrollIntoView创建一个函数：

window.addEventListener('hashchange', function() {
    let targetElement = document.querySelector('simple-element').$[location.hash.substr(1)];
    if(targetElement) {
        targetElement.scrollIntoView();
    }
}, false);

在聚合物中创建锚元素

2 个答案: