自定义组件样式重复，element-plus组件样式上升到页面head标签里

[dsmelon]

自定义组件的样式不应该紧跟着组件插入style标签，应该汇总去重后插入当前shadow-root下，当组件全部卸载时，再清除样式。 element-plus的列子，组件样式上升到了页面的head标签里，会污染主程序样式，而且组件越多，样式重复越多，例子里就能复现。

[EranGrin]

Hi @dsmelon, if you could write in a language that I can understand( German / English ), I would be happy to tackle this issue

[EranGrin]

The issue you experience might be due to a bug in an older version of the example of element plus. I updated the Version to the latest 1.6.4 https://stackblitz.com/~/github.com/EranGrin/element-plus-unocss-web-component?file=package.json

[dsmelon]

After the version is changed, the problem of repeated insertion of the element-plus component style is solved. However, the following two problems still exist:

1. The style of a custom component follows the style tag inserted by the component. When a component is used multiple times, the style is inserted multiple times. The styles should be summarized and deduplicated. You only need to insert the style once. When all components are uninstalled, the style is cleared.
2. When the element-plus is used, the theme file is normal. When the component is used, the file is automatically imported by the JS and is not escaped by the plug-in. As a result, the file is imported to the head tag on the top of the page, which may cause style conflicts. The file should be imported to the current shadow-root.

[EranGrin]

The style of a custom component follows the style tag inserted by the component. When a component is used multiple times, the style is inserted multiple times. The styles should be summarized and deduplicated. You only need to insert the style once.

This is the current design of that plugin, to create a style tag for every component style section, and if there are shared styles between the components that can be injected to the top of the Shadow DOM with the option of cssFrameworkStyles

When all components are uninstalled, the style is cleared.

Currently, if the components are unmount the style tag will also be removed

When the element-plus is used, the theme file is normal. When the component is used, the file is automatically imported by the JS and is not escaped by the plug-in. As a result, the file is imported to the head tag on the top of the page, which may cause style conflicts. The file should be imported to the current shadow-root.

If I recall correctly, this is because 'element plus' is passing the style as a css variable which can penetrate the Shadow Dom, with that being said I am working on a solution to inject styles with css vars to the :host of the Shadow Dom as it cannot use the :root

Please let me know if you have any other suggestions for improvements, or you are very welcome to open a PR

[dsmelon]

You misunderstood my first question. For example, when I customize a button component, I introduce this component on the page, I use this component three times, for the style, these three buttons should use the same style. Currently, there are three copies of the same style tag on the page.

[EranGrin]

@dsmelon I would like to close this issue as #4662 was closed from yyx990803