Blazor <a href> link in ShadowDOM causes page reload, correct way to redirect from href="javascript:"?

[MichaelPeter]

Hello AspNetCore Team,

I use a Html WebComponent for Navigation from our Design System which internally generates a

<a hef="SublinkA/SublinkB"

My browser shows me: localhost:55003/SublinkA/SublinkB as URL, localhost:55003 is my blazor webassembly page

If I press the link, Blazor does not route internally but instead the page gets reloaded to the new location.

Now if I put the Link into Blazor-NavLink obviously blazor redirects the link correctly without reloading the whole page.

Now the < a href > gets generated inside an html webcomponent where I don't have any Blazor NavLinks
but I can pass any url for example

< a href="javascript:RedirectTheBlazorWay()">bla</ >

Now instead of calling in the href:
javascript:DotNet.invokeMethodAsync("RedirectTheBlazorWay", controlRef, "SublinkA/SublinkB")

And Registering:
    [JSInvokable("RedirectTheBlazorWay")]
    public Task RedirectTheBlazorWay(string url)
    {
        NavigationManager.NavigateTo(url, forceLoad: false);
        return Task.CompletedTask;
    }

where RedirectTheBlazorWay needs to be a non static method because otherwise I cannot inject the NavigationManager
is there an easy way to redirect inside the blazor page?

Like javascript:DotNet.navigateTo(xyz)?

Or is there an error with my url that the link is not recognized as an local url.

Sorry if this was asked already but did not find any resources.
Just found this: https://chrissainty.com/an-in-depth-look-at-routing-in-blazor/

[mkArtakMSFT]

Thanks for contacting us.
Just to clarify, did you resolve this issue?
If not, please provide a minimal repro app and we can try to investigate it then.

[MichaelPeter]

Hi I am currently trying to reproduce it in a minimal sample, I come back to you. with a normal <a href link it does not cause the problem, maybe it needs to be in shadow dom.

[MichaelPeter]

Hi mkArtak,

I actually figured it out, yes the Problem is that the link is inside the Shadow DOM and so blazor cannot handle the link.

Here is the repository
https://github.com/MichaelPeter/BlazorShadowDomLinkTestApp

This is the sample web component which causes the problem

Index.razor:
<webcomp-link></webcomp-link>

TestWebComponent.js:

customElements.define('webcomp-link', class extends HTMLElement {
    constructor() {
        super(); // always call super() first in the constructor.

        // Attach a shadow root to <fancy-tabs>.
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
          <a href="Counter">ShadowDOM Link</a>
    `;
    }
});

If you use the repository just click on ahref link and ShadowDOM Link