Closed dlin-me closed 1 year ago
hi @dlin-me , thanks for posting it. I just fixed it as described below:
this behavior depends on how vite handles style imports: by default, vite adds imported styles into the head.
to ensure that they are not inserted in the head and solve the problem that you mentioned just add ?inline
in the import of the .scss file
so, for instance:
import style from "./test2.component.scss?inline"; // look at the ?inline at the end: it fixes the issue
I just updated the repo too ;-)
@salvatoreromeo Thank you! This solves the problem.
Hi, appreciate your repo. But styles are leaking into the parent page with your approach.
To show the problem. Add one
to the index.html:
The result
Also, the styles should not be added to the parent html page header. It should be scoped to the components itself.
The problem is that the static style variable needs to be the static property of the web component class itself, not to the parent class.