Recently started using UNOCSS (taiwind-like css) and my components started bloading because of classes. And here I came up with idea of exporting components to UI wrappers, but soon found out that it adds a lot of overhed (in larger scope, remember it's just template with div and slot; 0 logic). Since I use SSR - it matters a lot because it bloats JS bundle to store components instance data in global VM and inpacts first load. I came up with inline functions that return exact html template I need to use it with v-html, but I lose control over things I can "drill" inside since it can be only some string.
MySolution.vue
<template>
<div v-html="drillStr('Yello World')">
</div>
</template>
const drillStr = (str)=>{
return `
<div class="long ass classes">
${str}
</div>
`
}
I tried the example above, expecting to hear possible solutions. There may be none actually