Emulate `:target` to allow styling anchor element

[Philipp Daun]

Describe the problem

When clicking a hash link on a page, swup scrolls to the matching target element. But the :target selector doesn't have any effect. This example will paint the element #my-element red without swup enabled, but won't do anything with swup.

<a href="#element">Scroll to element</a>

<div id="element">Element</div>

<style>
  :target {
    background: red;
  }
</style>

Describe the proposed solution

From the discussion of the original issue on the core repo:

Seems like fitting aria-current values could be location or simply true. I worry that using that attribute could interfere with consumer-scripts, though (they may be using the aria-current attribute already to mark an active tab or the like).

Maybe a simple swup-scroll-target or swup-current-target or swup-hash-target attribute would be less intrusive? In that case, it should be part of the Scroll Plugin, as you first suggested.

Research

A few links with prior discussions or solutions:

• Discussion on html working group
• Test case for :target behavior on pushstate
• Test case for dynamic update of :target style
• Example jQuery plugin for emulating targetchange event

How important is this feature to you?

• Nice to have
• Would make my life a lot easier
• I cannot use swup without it