Javascript Vue设置子组件窗体和窗体元素的样式

我试图在子组件中设置表单样式，但在

\deep\

、

>

和

：v-deep

选择器针对

、

元素时遇到问题

//父组件

<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>

<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>

//子模板

<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>

电子邮件
密码
登录

---

生成的子HTML在表单元素上具有属性

\u v-3353696a=“”

。而父CSS的选择器为

.form bottom/deep/form[\u v-41cced72]

。是否应将

/deep/

选择器编译为作用域属性？

从Vue文档中删除“作用域”，表示要在作用域中使用此选项，请确定。类“form bottom”的元素是什么？在您提供的代码中，我没有看到任何带有此类的标记。它在父级中，我只是更新了我的问题以包含它

<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>