Skip to content

Injecting global styles to shadow: true Custom Elements #47

Open
@wbern

Description

@wbern

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions