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 ids 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);