In my VUE project, I have an Element.js file that contains a component exported in a unique structure:
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
},
style: `
h1, p {
color: red !important; /* NOT WORKING */
}
`
}
This structure deviates from the usual
<template></template> <script></script> <style></style>Given this non-standard configuration, the question arises: Can CSS styling be added to this component?
The attempted usage of the style property as shown above has proven unsuccessful in applying styles.