Create Anchor Element in polymer

Question

Is it possible to create an element that will be used as an anchor in polymer. So for example

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

Would it be possible to create a hyperlink to the content#id anchor like http://example.com/#someid

---

Alternatively, we can query that element with querySelector like the below and then scroll it into view if necessary with JavaScript. I'd rather not have to use a JS router however for anchor hyperlinking?

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

---

Here's an actual URL I want to get working: http://megawac.github.io/status-whiskey/#status-408

Answer 1

The Web Component gods (aka Blink engineers) have decided that anchors inside of shadow-roots will not automatically scroll into view like they do in the main document. For this reason, I believe you will have to do something like you showed to handle this in JavaScript.

After brief searching, I couldn't find a reference to this question in the spec , it really needs to be spelled out somewhere.

If you come up with general solution, elementize it and share it back to the community. =P

Answer 2

Let's say you have a simple-element with some child elements with id s as anchors:

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

Then you can make a function to scrollIntoView when the hash changes:

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