Internal Links in Polymer 2.0

Question

What is the correct way to implement internal linking in Polymer 2.0 (linking within the same page)? I cannot seem to get access to my components that are buried within ShadowDoms, so the traditional way of using <a href="#my_section">link to top</a> and <a name="my_section"></a> and <a id="my_section"></a> does not work.

I have also tried the solutions here to no avail:

The following code that I've tried all return null, even when I add an id to my component:

document.querySelector('#my_section'); //null
this.$.my_section; //null
this.root.querySelector('#my_section'); //null
this.shadowRoot.querySelector('#my_section'); //null

Perhaps there is a way to accomplish this using <app-route>?

I'm quite new to Polymer so any advice would be appreciated. Thanks in advance.

"#my_section" queries for an ``? are u sure you want to use name? — daKmoR, Jun 20 '17 at 10:03
@daKmoR I've actually tried "id" as well, but that does not work either. I've updated the question. — VIN, Jun 20 '17 at 17:32
Are you querying from within the element, or from outside of it? — codeMonkey, Jun 20 '17 at 18:59

score 0 · Answer 1 · answered Jun 22 '17 at 18:19

Please share more detailed code that which elements you want to access and manuplate. Here at this document

https://www.polymer-project.org/2.0/docs/devguide/dom-template

under the Static node map head shows shortly :

The this.$ hash is created when the shadow DOM is initialized. In the ready callback, you must call super.ready() before accessing this.$.

Internal Links in Polymer 2.0

1 Answers1