Turbo visits don't set `:target` to the targeted element

When doing a Turbo visit to a link that has an anchor #, the targeted element does not have the :target pseudo-class.

Steps to reproduce

1. In the Turbo project, visit http://localhost:9000/src/tests/fixtures/navigation.html
2. Search for elements with :target pseudo-class: $(':target') returns null
3. Reload page
4. Search for elements with :target pseudo-class: $(':target') returns element with id element-id

Expected behavior

After clicking a link with an anchor, it’s expected that the element which matches the URL hash has the :target pseudo-class.

This is important for apps that use that selector to add an indicator to the element - like navigating to a specific comment in a GitHub Issue:

We are happy to look into this if we can get some pointers on where hashes may be getting interfered with 😃

[domchristie]

Another option might be to create a link element behind-the-scenes

This seems to work:

addEventListener('turbo:load', target)
addEventListener('hashchange', target) // for same-page navigations

function target () {
  if (location.hash) {
    const a = document.createElement('a')
    a.href = `#${location.hash.slice(1)}`
    a.click()
  }
}

[straight-shoota]

I’ve encountered this problem as well when :target CSS selectors stopped working with turbo navigation. The workaround triggering an on-page navigation in the browser seems to work well (https://github.com/hotwired/turbo/issues/592#issuecomment-1137827028).

I think it would be great if turbo provided this functionality directly. It’s supposed to replace native browser navigation, so it should also cover all facets of that.