I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code:
<template>
<custom-button>
#shadow-root (open)
<a href="#"></a>
<other-custom></other-custom>
</custom-button>
</template>
<style scoped lang="scss">
custom-button{
:deep(a) {
outline:1px red solid;
}
}
</style>
Despite trying various methods like scoped and slotted, I have not been able to get the style applied to the anchor. Any suggestions on how to solve this issue would be greatly appreciated. Thank you for your help.
Here is a new example:
test.vue
<template>
<custom-button>
</custom-button>
</template>
<style scoped lang="scss">
.custom-button {
:deep(a) {
outline: 3px red solid;
}
}
</style>
custom-button.vue
<template>
<a href="#">Link</a>
</template>
<script>
export default {
name: 'custom-button',
};
</script>
Unfortunately, this solution did not work when using Tolbxela demo environment.