<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>
This piece of code was my attempt to add the input element with a specific style class called input-test. However, I encountered an issue where the style defined in the .input-test class wasn't applied to the element itself. Curiously enough, it worked when I removed the "scoped" attribute from the style tag. Can anyone explain why this happened?