21

I'd like to be able to link to certain portions of my page using URL fragments, eg:

<h3 id="overview">Overview</h3>

...
<a href="#overview">Go to Overview</a>

Unfortunately the IDs i set from within LWC templates get overwritten, so my links don't work. Is there any way to define the ID attribute so it won't change?

1

3 Answers 3

33

Assuming you want to scroll to an element you have access to, you could always use scrollIntoView:

this.template.querySelector("h3").scrollIntoView();

You can basically use any valid CSS selector to find a specific element (e.g. based on a data-id or another attribute).

As far as I can tell, from a lack of documentation, you can't specify an anchor target. You would write the link like this:

<a onclick={handleClick} data-target-id="overview">Overview</a>

Given an H3 like this:

<h3 data-id="overview">Overview</h3>

And scroll with this:

handleClick(event) {
  let targetId = event.target.dataset.targetId;
  let target = this.template.querySelector(`[data-id="${targetId}"]`);
  target.scrollIntoView();
}

((Note: Not tested, you might need to tweak the CSS selector.))

This assumes that the link and target are in the same template, otherwise this won't work. As far as I can tell, you can't target arbitrary elements.

2
  • Doesn't work. @tsalb's answer works. Jan 20, 2021 at 17:04
  • 1
    @MartinLezer It should work... it used to work? It might be worth asking a separate question so this can be reviewed for you. Both their code and mine are virtually identical, just mine is more detailed.
    – sfdcfox
    Jan 20, 2021 at 19:21
22

Yes, you can use data-id and the HTMLElement dataset property.

<h3 data-id="overview">Overview</h3>
const element = this.template.querySelector('[data-id="overview"]');
// element.dataset.id === 'overview'
1
  • Thanks for your answer. This definitely works for buttons within the same page, but unfortunately with this approach I'm still missing the ability to provide links to certain parts of the page (for example, I can link to the references section of a wikipedia page like en.wikipedia.org/wiki/Salesforce.com#References ). I suppose it's possible to build this functionality into my component by parsing the URL and calling something like scrollIntoView(). Perhaps this issue is not unique to salesforce and instead a problem for single page apps in general. Apr 2, 2019 at 3:11
2

To use dynamic Ids in the query selector use this code.

this.template.querySelector("[id='"+divId+"']");

If you are working on the iterations and want to access on id then checkout this code.

<template for:each={accounts.data} for:item="acc">
     <div key={acc.Id} id={acc.Id} class="box" onclick={handleClick}>
       {acc.Name}
     </div>
</template>

I wanted to access div data with using its ID when calling the onclick event on the div.

handleClick(event){
 
 var divId = event.target.id;

 //Using the divId in querySelector       
 var Element = this.template.querySelector("[id='"+divId+"']");

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.