Vue Styling a Child Component Form and Form Elements

Question

I am trying to style a form within a child component and am having problems with the \deep\, >>>, and ::v-deep selector targeting of <form>, <input>, or <button> elements.

// Parent Component

<template>
    <div class="form-bottom">
        <login-form :is-modal="false"></login-form>
    </div>
<template>

<style scoped>
    .form-bottom /deep/ form {
        display: block;
        margin-top: 0em;
    }
</style>

// Parent Component

<template>
    <form autocomplete="off" @submit.prevent="login" method="post" role="form" action="" class="login-form">
        <div class="form-group">
            <label class="sr-only" for="email">E-mail</label>
            <input type="email" id="email" ref="email" class="form-username form-control" placeholder="user@example.com" v-model="email" required />
        </div>
        <div class="form-group">
            <label class="sr-only" for="password">Password</label>
            <input type="password" id="password" class="form-password form-control" placeholder="Password..." v-model="password" required />
        </div>
        <button type="submit" ref="password" class="btn">Sign in</button> <a href="/password/forgot" class="forgot-password" @click.prevent="forgotPasswordModal">Forgot Password</a><!--<a href="/password/forgot">Forgot Password</a>-->
    </form>
</template>

The output CSS and HTML in browser console.

// Parent CSS

.form-bottom /deep/ form[_v-41cced72] {
    display: block;
    margin-top: 0em;
}

// Child Template

<form autocomplete="off" method="post" role="form" action="" _v-3353696a="" class="login-form">
    <div _v-3353696a="" class="form-group">
        <label for="email" _v-3353696a="" class="sr-only">E-mail</label> 
        <input type="email" id="email" placeholder="user@example.com" required="required" _v-3353696a="" class="form-username form-control">
    </div>
    <div _v-3353696a="" class="form-group">
        <label for="password" _v-3353696a="" class="sr-only">Password</label>
        <input type="password" id="password" placeholder="Password..." required="required" _v-3353696a="" class="form-password form-control">
    </div>
    <button type="submit" _v-3353696a="" class="btn">Sign in</button> <a href="/password/forgot" _v-3353696a="" class="forgot-password">Forgot Password</a>
</form>

The resulting Child HTML has an attribute of _v-3353696a="" on the form element. While the Parent CSS has a selector of .form-bottom /deep/ form[_v-41cced72]. Should the /deep/ selector be compiled into a scoped attribute?

The Vue documentation says to use this within scoped https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements — stoi2m1, Mar 06 '20 at 17:29
Ok. What element has the class "form-bottom"? I didn't see any tag with this class in the code you provided. — lucas, Mar 06 '20 at 17:31
https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-in-vue-js/55368933#55368933 — Dan, Mar 06 '20 at 18:14
@Dan i just saw this post and another like it and tried changing my language to SASS and SCSS neither are converting the /deep/ selector into an attribute — stoi2m1, Mar 06 '20 at 18:29
@Dan After switching lang="scss" and trying both ::v-deep and >>> I am still not seeing either being converted to an attribute. Should I? I am seeing the SCSS being converted into CSS but still see ::v-deep at the beginning of the selector in style sheet loaded in my browser and >>> is converted to a single >. — stoi2m1, Mar 06 '20 at 19:27
Did you choose sass when you created your project in vue cli? If not, I recommend creating a new project and choosing `dart-sass`. — Dan, Mar 06 '20 at 20:10

Vue Styling a Child Component Form and Form Elements

0 Answers0