Vue样式化子组件表单和表单元素

Question

我正在尝试在子组件中设置表单样式，并且遇到\deep\，{{1}的>>>，::v-deep和<form>选择器定位问题}}或<input>元素。

//父组件

<button>

//父组件

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

浏览器控制台中的输出CSS和HTML。

//父CSS

<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-bottom /deep/ form[_v-41cced72] {
    display: block;
    margin-top: 0em;
}

所得的子HTML在form元素上具有属性<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> 。而父级CSS的选择器为_v-3353696a=""。 .form-bottom /deep/ form[_v-41cced72]选择器是否应该编译为作用域属性？