Here is my form component code:
<template>
<div>
<form>
<input placeholder="Recipe Name">
<textarea placeholder="Recipe Description..." rows="10"></textarea>
</form>
</div>
</template>
<script>
export default {
name: 'AddRecipeForm'
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
}
</style>
The <style> block has the scoped attribute.
Despite having the scoped attribute, the CSS styles are not being applied. However, when I remove the scoped attribute, the styles work as expected.
I would like to keep the CSS local to this component. Can you explain why the styles are not working with the scoped attribute present?