Создание анкерного элемента в полимере

Question

Возможно ли создать элемент, который будет использоваться в качестве якоря в полимере. Так, например

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

можно было бы создать гиперссылку на якорь содержание # ид как http://example.com/#someid

---

В качестве альтернативы, мы можем запросить этот элемент с querySelector как ниже, а затем прокрутить его в при необходимости просмотрите JavaScript. Я бы предпочел не использовать JS-маршрутизатор, но для привязки гиперссылки?

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

---

Вот фактический URL я хочу, чтобы получить рабочий: http://megawac.github.io/status-whiskey/#status-408

Answer 1

веб-компонентов богов (ака инженеры моргания), решили, что анкеры внутри теневых корней не будет автоматически прокручивать в поле зрения как они делают в основном документе. По этой причине, я считаю, вам придется сделать что-то вроде того, что вы показали, чтобы справиться с этим в 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);