How can I change the content of an element plus vuejs component? - vue.js

Question

I need to change the content of element plus components.
I tried using <template> and <slot>, but without success.
<ElInput v-model="form.name" placeholder="Nome">
<template>
<input class="intro-x login__input form-control py-3 px-4 block"
type="text"
autocomplete="off"
tabindex="0"
placeholder="Nome"
>
</template>
</ElInput>

Answer 1

If you want to pass some specific style to your component, you will need to use input-style as shown here. There is nothing similar to input-class so far, so you're stuck with something like this
<template>
<el-input
v-model="form.name"
:input-style="{ backgroundColor: 'red', height: '4rem' }"
type="text"
autocomplete="off"
tabindex="0"
placeholder="Nome"
>
<template>
<input />
</template>
</el-input>
</template>
There are no other slots related.
Meanwhile you can always hack the whole thing and style it with your own CSS as like this
<style scoped>
:deep(.el-input__inner) {
background-color: teal;
border: 2px solid coral;
}
</style>