css :target selector does not work when loading a new page

[MattApril]

I am utilizing the css :target selector for highlighting anchor tags that I jump to on a page. It works fine jumping to an element on the same page, but if I navigate to a new page with an anchor tag it does not trigger the :target selector properly.

Example:
Current page: /stuff
This triggers :target selector as expected: /stuff#thing1
This does not trigger the :target selector: /more#thing1

As is, the only workaround I have is to remove Unpoly functionality from links where I'm changing the page and jumping to an anchor. Is there a solution for this, or is it a bug with Unpoly?

PS. Thank you for this framework, it is really great.

[triskweline]

AFAIK it's a known bug that most browser implementations don't update :target when the history is updated with JavaScript:
whatwg/html#639

This cannot be fixed by Unpoly I'm afraid.

A workaround would be to assign a class .hash-target to elements that would be matched by the URL hash, and style that class in addition to :target:

:target, .hash-target {
  background-color: yellow
}

You could assign that .hash-target class automatically with code like this (untested):

let markedElement = null

window.addEventListener('hashchange', function() {
  if (markedElement) {
    markedElement.classList.remove('hash-target')
  }
  
  if (location.hash && (markedElement = document.querySelector(location.hash))) {
    markedElement.classList.add('hash-target')
  }
});

[triskweline]

I ended up solving this differently for our documentation site unpoly.com, see commit linked above.

[MattApril]

Thanks for the update, I will take a look.