Below is a functional component that functions as intended.
<template functional>
<div>
<input />
</div>
</template>
<script>
export default {
name: "FunctionalComponent"
}
</script>
<style scoped>
input {
border: 2px solid red;
}
</style>
Despite its functionality, it seems that Vue may have issues with scoped styles. In the vue devtools, an AnonymousComponent appears during rendering and errors are displayed in the console. Removing the style tag resolves these issues.
Is this expected behavior or am I doing something incorrectly?
https://i.stack.imgur.com/kQI69.png https://i.stack.imgur.com/LMOrS.png