javascript - 如何在vue组件中createElement之后应用css样式？

Question

<template>
  <div id="body">
    <button type="button" @click="create">Create</button>
  </div>
</template>
<script>
  export default {
    methods: {
      create () {
        let e = document.createElement('input');
        e.classList.add('input-test');
        e.setAttribute('type', 'text');
        e.setAttribute('value', 'test');
        document.getElementById('body').appendChild(e);
      }
    }
  }
</script>
<style scoped>
.input-test {
  color: red;
}
</style>

我尝试了这段代码。但没有应用输入测试风格。 为什么不能应用于元素？ 当我删除样式标记的范围时它起作用。

Answer 1

我通过深度选择器解决了 deep selectors