So I am a UX designer that is trying to assist the dev team with some styling. I have searched all over for a way to style only one element of our breadcrumbs (home) link. Is this possible? I have tried everything and it only affects all of the elements. Am I missing something or is this not possible?

<PVBreadcrumb :home="home" :model="breadcrumbItems"> <!-- HOME LINK STYLING--> <template #home="{ item, props }"> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <a :href="href" v-bind="props.action" @click="navigate"> <span class="text-primary">{{ item.label }}</span> </a> </router-link> <a v-else :href="item.url" :target="item.target" v-bind="props.action"> <span class="text-primary">{{ item.label }}</span> </a> </template> <!-- END OF HOME LINK STYLING --> <template #item="{ item, props }"> <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom> <a :href="href" v-bind="props.action" @click="navigate"> <span class="text-color">{{ item.label }}</span> </a> </router-link> <a v-else :href="item.url" :target="item.target" v-bind="props.action"> <span class="text-color">{{ item.label }}</span> </a> </template> <template #separator> <span class="pi pi-angle-right"></span></template> </PVBreadcrumb>