preactjs / preact-custom-element

Wrap your component up as a custom element
MIT License
355 stars 52 forks source link

Injecting global styles to `shadow: true` Custom Elements #47

Open wbern opened 4 years ago

wbern commented 4 years ago

Hello! Me and my org were recently very impressed with your hard work to support slots and property reflection.

A common developer issue when you start having Custom Elements with Shadow DOM enabled, is to somehow inject styles into the element. Sometimes you don't have the luxury of being able to inject the needed stylings directly into the Custom Element's Shadow DOM.

After my org forked the @vue/web-component-wrapper to add support for IE 11, we added functionality for injecting global styles using a mutation observer in our fork, named @telia/vue-web-component-wrapper-ie11. Link to relevant code from the fork can be found somewhere around here.

This approach seems to have surprisingly good performance (partly because browsers seem to cache style-elements that have identical contents), and since we'll definitely need this in our experiment to turn React components into Web Components, we figured this functionality would fit well within your wrapper.

Please let us know what you think!