Add `#tag-content` which only replaces the content inside a `#tag` (such as text)

[Finrod927]

Hi (again 😊)

I'm using the option slot to customize the options with some icons, and I wanted to use the tag slot to do the same for selected options.

But I also wanted to keep the original style of tags so I looked into what's done by default and replicated inside the tag slot:

<template #tag="{ option, removeOption }">
  <div class="multi-value">
    <Icon ... />
    <div class="multi-value-label">{{ option.label }}</div>
    <button class="multi-value-remove" type="button" @click="removeOption">&times;</button>
  </div>
</template>

But unfortunately, the style defined for multi-value classes is scoped and so does not style my tags at all.

Playground link to see what I mean.

Could it be possible to not scope the default style? So we can customize the content and keep the default style?

[TotomInc]

Once you start customizing the template of #tag, the component can't support the base style anymore. I think your best bet here is create a custom styling entirely on your own, which isn't a lot of code given the component flexibility.

IMO, injecting default styles once you start overriding a template isn't a good practice. It's more explicit that, when you're writing your own template, you want your own customization and you're starting to break-out of the component self-made DOM & styling, if you see what I mean.

Not sure I can do a lot without introducing a breaking change in the component usage, sorry.

Quick playground link of adding custom styling on your example.

I'll reconsider the design choice if more developers encouter the same issue as yours.

[Finrod927]

Yes, that's what I did, I created a small "VueSelectTag" component with your style.

I totally understand you point, maybe a better solution would be a separate slot #tag-content that would replace only the content/label of the tag to keep the base style and the close button?

I'll reconsider the design choice if more developers encouter the same issue as yours.

But you are right here, don't make big changes only for me 😊

[TotomInc]

A separate slot #tag-content that doesn't replace the entire #tag is a nice idea. I'll see how to implement this 👍

[TotomInc]

@Finrod927 you can use the #tag-content slot on v0.14.0-beta.1 (documentation demo link).
Feel free to test it and report back here.
However, please notice that there's a small breaking change when upgrading from v0.13.0 to v0.14+: component styles must be manually imported. Read more about it on this documentation page.

[Finrod927]

Looks good :)

Thanks!