use:active styling and strange behavior

[jamauro]

I'm hoping to style the active link. I'm using it like this inside a component:

<a href='/foo/{id}' use:active>
 ... more html content
</a>

I see the active class is applied but the styling with .active in the component has no effect:

<style>
.active {
 color: red;
}
</style

I also noticed that for some reason the active is being applied to two different <a> tags even though they have a different id. e.g. these both get an active class:

/foo/123
/foo/456

I tried using <a href='/foo/{id}' use:active exact> but that didn't seem to work either.

Any ideas?

[AlexxNB]

1. Directive use:active may apply global class only, because all isolated classes in component will remove by Svelte compiler if not used in class directive. So you should use class from global.css or use :global modifier in the component:

   <style>
   :global{.active} {
        color: red;
   }
   </style>

2. Using templates in link address will break url matching, because it will compare first href value only(suppose it will be /foo/undefined). I'll try to fix this soon.

[jamauro]

If anyone happens to stumble across this one in the future, I solved the 2nd issue I mentioned by updating my layout to use nested routes.