sl-icon only shows up on first occurrence in production

[devmount]

I have a really weird problem for a few months now, which I wasn't able to solve yet - maybe someone has an idea or fixed a similar problem.

I built a SPA with TypeScript (4.5.4), Vue (3.2.26) and Shoelace (2.0.0-beta.62). When developing the application (yarn serve) and accessing it via localhost, everything works fine, all icons are correctly showing. So far so good.

Now the problem. When building and deploying the app (yarn build) and accessing it via myapp.mydomain.tld icons are only partially showing. To be more concrete: In lists (created with v-for), only the first icon is displayed, all other icons are invisible.

Here is an example of a comparison of both, a table with some rows having a button with an icon and a dropdown menu:

This is the markup I wrote (simplified):

<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="record in objects">
      <td>
        <span v-if="record.email">
          <sl-button type="default" label="E-Mail senden" @click="mailto(record.email)">
            <sl-icon slot="prefix" name="envelope"></sl-icon>
            {{ record.email }}
          </sl-button>
        </span>
      </td>
      <td>
        <sl-dropdown placement="bottom-end">
          <sl-button slot="trigger">
            <sl-icon name="chevron-down"></sl-icon>
          </sl-button>
          <sl-menu class="menu">
            <sl-menu-item class="menu-item" @click="openEditDialog('edit', record)">
              <sl-icon slot="prefix" name="pencil"></sl-icon>
              Bearbeiten
            </sl-menu-item>
            <sl-menu-item class="menu-item" @click="openEditDialog('clone', record)">
              <sl-icon slot="prefix" name="layers"></sl-icon>
              Klonen
            </sl-menu-item>
            <sl-divider></sl-divider>
            <sl-menu-item class="menu-item danger" @click="openDeleteDialog(record)">
              <sl-icon slot="prefix" name="trash"></sl-icon>
              Löschen
            </sl-menu-item>
          </sl-menu>
        </sl-dropdown>
      </td>
    </tr>
  </tbody>
</table>

When inspecting the generated markup, you'll see, that the Shoelace component was generated, but the svg element is missing. Instead there is a <!--?-->.

I wasn't able to reproduce this in a CodePen yet (sorry about that), but maybe someone has an idea, why this is only happening in production? And why it only happens to icons in not-first-list-items only? Thanks for any help in advance!

[claviska]

Open the dev console at the XHR tab and refresh the affected page. Are the all the icons you're using being requested? Are the responses 200 OK?

I'm not seeing the base path set in the code above, so that could also be an issue (but it doesn't explain why one icon shows up, unless it's cached somehow).

[devmount]

Yes all icons are here with 200 (some are from disk cache though):

I set the base path like this:

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
setBasePath('/dist/shoelace');

// bootstrap icons
import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';

registerIconLibrary('default', {
	resolver: name => `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg`
});

I experimented with different libraries / bootstrap-icons versions, but it always had the same effect.

[claviska]

In lists (created with v-for), only the first icon is displayed, all other icons are invisible.

I didn't see this before. I suspect it may have something to do with how Vue is rendering the list. Have you added a :key property to your list items?

• Vue 2
• Vue 3

Does playing with that change the behavior?

[devmount]

Yes I did, unfortunately that doesn't change anything. The strange thing is that it really only affects the svg part of the sl-icon component. Alle other components are rendered without any problems.

I'm not very familiar with Lit - what does the <!--?--> mean? Is there a way to find out, why this was returned?

[claviska]

Lit uses comments as a sort of placeholder. I don't think it's relevant to what you're seeing.

Would you be able to create a minimal repro in a GitHub repo so I can take a look?

[stefanonepa]

For my issue I found a work around, by adding a v-once directive on the custom element. But I guess it would be nice to understand what's happening with the name of the custom element.

[devmount]

@stefanonepa Thank you for this workaround - indeed if I put a v-once at every sl-icon component, all icons are rendered properly. Very strange. As Cory already said: It's probably related to how Vue is rendering lists.

Can you provide a minimal repro maybe?

[stefanonepa]

I would love too. But my issue here is that it works perfectly when developing locally and fails when deployed. I will try to think about a way to reproduce the issue. Sorry not being more helpful.

[devmount]

Yes, that's exactly my problem too and it's what makes this bug so difficult to fix. I'll let you know, when I managed to create a minimal repro repo.

[devmount]

I've given up reproducing this in a minimal code example. The workaround with v-once does it for me, so I'm marking this thread as answer. If somebody finds the cause of this issue, please let us know.

Thanks again to @claviska and @stefanonepa for looking into this.

[claviska]

A similar issue was identified with tabs in #623. Adding v-once to each tab and tab panel made it work. I'd really like to get to the bottom of this, but it definitely feels like it's something to do with how Vue is handling these components.

[justinfagnani]

Really interesting. I'd like to hear what's going on too, if you figure it out. I'm very curious how something is going wrong on the inside of the shadow root for the icon.

[claviska]

I tested a bit more today and couldn’t replicate this or the tab issue in a fresh Vue 3 app, both dev and prod. I’m wondering if it’s a sandbox issue.

@michaelwarren1106 noticed that both the tab panel and icon use the name attribute, which is a global HTML attribute (maybe Vue treats them differently or something). It hasn’t caused any issues thus far, but I think it’s an odd coincidence nevertheless.

It’s really hard to troubleshoot this without being able to replicate it. 🤷🏻‍♂️

[michaelwarren1106]

here’s the info i gathered.

in the screens above, the rendered code ones, notice how the sl-icon has no name attr even though it’s hardcoded in the source code screenshot. when i sandboxed shoelace icons and manually didn’t provide a name attribute, i see the exact same comment structure as shown in the screens above, question mark comment and all.

seems to me that vue isn’t adding the name attr in the loop. i wonder if saving those to a variable instead of hard coding would change things, but i also haven’t been able to reproduce anything specifically vue related.