We integrated a Vue component (using Vuetify) into our existing .NET MVC application. The issue we are facing is that the Vue component is inheriting all the CSS styles from the rest of the application. Here's a simplified version of the HTML structure:
<html>
<head>
</head>
<body>
...
<div class="VUE_CLASS">
//vue component...
</div>
...
</body>
</html>
The styles are defined in css.less.
Attempts have been made to exclude the VUE_CLASS by using :not(.VUE_CLASS) and div:not(.VUE_CLASS), as well as wrapping it within a rule in the css.less file:
*:not(.VUE_CLASS){
//...existing application's css rules
}
Unfortunately, these methods have not been successful.
Research led us to various strategies (). However, using an iframe is not feasible due to backend accessibility constraints. Similarly, Web components cannot be utilized as IE11 support is mandatory for us.
Is there a way to completely exclude the div along with all its child elements using less?
Thank you and regards,
Finn