navigation doesn't load SL theme/slots

[TheRHogue]

When I click on a link, the Shoelace themes are not applied, but upon clicking refresh, the themes are applied. Below is a before and after image:

Details:

This is a blazor .net 8 static driven application. Shoelace is being used to render the static components along with htmx. I am new to shoelace and the shadow dom technique. Are there any ideas on why a navigation from within the app would prevent the theme from appearing?

thanks
Rob

[claviska]

I think we're going to need more info. How are you including the stylesheet? Are you loading Shoelace as a <script> from the CDN or are you using npm + bundling? Code and/or a repro would be even better to help troubleshoot.

[TheRHogue]

CDN or bundling produce the same result. Bothe Shoelace and UIKit have the same issue. The repro is a .net 8 blazor static app with shoelace components on the page, and perform an navigation to another page. Below you can see the navigation response which is only html for the dom...there is no "refresh" of scripts to register web components. We moved to bootstrap as that is class based, and there have been no issues because no code needs to be run as it is already loaded.

[claviska]

Sorry, but this still isn't enough to troubleshoot. If you want to post a repro then we'll be happy to take a look. If you're using a client-side router, it's probably something to do with how it's loading pages. Without seeing a repro, we can only guess.

[TheRHogue]

This is turning into a blazor issue via enhanced navigation. This is not a shoelace issue. Blazor only updates the dom in static render mode, and somehow any javascript is no longer connection on an navigation. https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-6/ . We are testing with .net 8 GA to see if the issue gets resolved.

[TheRHogue]

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/static-server-rendering?view=aspnetcore-8.0 , this is how we fixed everything including bootstrap and htmx. This is Microsoft's solution which allows a hook into when blazor does an enhanced navigation and javascript can then be re-initialized. I have not looked at how to re-init a shoelace component, but I assume there would be something.

[mariohamann]

Is it possible that the navigation is updated via AJAX and there's some morphing happening? If yes, the server isn't aware of any hydrated or dynamic attributes and depending on the morphing strategy you'll lose them.

I experienced this problem with Laravel Livewire and wrote down how I solved it in the end: https://mariohamann.com/livewire-web-components-attributes

In your particular case: What happens if you explicitly set the variant, size and slots on server-side, too?

[TheRHogue]

I posted an answer based on a Microsoft solution in the above thread. https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/static-server-rendering?view=aspnetcore-8.0 . It hooks into the blazor enhanced navigation and allows the component to initialize again.

[andrew-skybound]

This is indeed caused by .NET 8's enhanced navigation feature. The issue is not specific to Shoelace, it would affect any UI library that alters classes or attributes dynamically.

In this case, Shoelace is adding some attributes with default values to certain elements when no explicit value is specified (for example, variant and size are automatically added to sl-button). It appears these attributes are necessary for the element to render correctly. Unfortunately Blazor's enhanced navigation feature wipes out these attributes when navigating between pages because they were added dynamically, and it is not aware of them. I've found that it's possible to work around the problem by specifying explicit values for these attributes instead of allowing Shoelace to assign defaults itself, but since that's pretty cumbersome...

I've written a small script that works around the problem using a MutationObserver: it simply restores the old value of the variant and size attributes if they're ever wiped out. This script only needs to be run once at page load. If there are attributes other than variant and size that you need to preserve, just add them to the attributeFilter:

    new MutationObserver(mutation => {
        for (let m of mutation) {
            if (m.type == "attributes" && m.target.localName.startsWith('sl-') && m.oldValue && !m.target.getAttribute(m.attributeName)) {
                m.target.setAttribute(m.attributeName, m.oldValue);
            }
        }
    }).observe(document.body, {
        subtree: true,
        childList: true,
        attributeFilter: ['variant', 'size'],
        attributeOldValue: true,
    });

[KonnorRogers]

I don't know if it'll happen in Shoelace 2.0, but I have a pretty good idea how to fix this in Web Awesome with attribute converters.

lit/lit#4643 (comment)