vue-web-component-wrapper icon indicating copy to clipboard operation
vue-web-component-wrapper copied to clipboard

Fix to prevent cssFrameworkStyles from being output further down the DOM in tree

Open MarcHartwig13 opened this issue 1 month ago • 0 comments

This prevents vue-web-component-wrapper from outputting the cssFrameworkStyles. This makes sure the component styles can override the cssFrameworkStyles

Stackblitz: https://stackblitz.com/edit/vitejs-vite-qvbmtobb

It looks like this name attribute was removed previously but I'm unsure why.

During this I also discovered that the <style> tags are output twice. When using shadowDOM, they are output at the top of the shadowDOM in the wrong order with the cssFrameworkStyles lowest in the DOM tree. They are also output within the first element within the shadowDOM.

This doesn't happen with the shadowDOM disabled: https://stackblitz.com/edit/vitejs-vite-nxzqsdqz with this fix. Without this fix then the cssFrameworkStyles are output twice

I have a feeling that the issues stem from Vue's defineCustomElement trying to handle styles as well as vue-web-component-wrapper trying to handle them

MarcHartwig13 avatar Nov 04 '25 03:11 MarcHartwig13