search

preactjs / preact-custom-element

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

feat: inject template styles to shadow dom #58

Open loberbichler opened 3 years ago

loberbichler commented 3 years ago

What does this PR do

The goal of this PR is to allow the use of shadow dom and still be able to style elements and children via "normal" classnames.

Also installs libharfbuzz-icu0 libenchant1c2a to the host system as the ubuntu lts changed from 18.04 to 20.04.

Why is this PR needed

As web components with shadow dom are isolated, global styles do not apply, the styles need to be available inside the components shadow dom. This PR adds the possibility to pass styles to the options object of the register method. If given styles, the method appends a <template> element (if it does not exist already) with the given styles to the <head> and appends a copy to the components _root.

Example

I've created an example to showcase the feature CodeSandbox preact-custom-element style-injection