Missing some styles of section content when using Web Components API + Shadow DOM

Bugs
,
1

Summary

I’m attempting to use builder inside a complex application using LitElement.

From my understanding it appears that in some cases the emotion.sh library will attach styles to the head element that are supposed be applied to builder-component rendered html.

Since the builder component is inside a Shadow Root this style will not be applied.

Below is a simple reproduction where the columns layout is not applied inside a builder component rendered inside shadow dom:

Builder content link: 7f444990d5cc433993f886cecce003b5
Builder public api key: e664f51435824dac982ef7201f38e3d7

Detailed steps to reproduce the bug

  • Open the editor
  • Create any blocks contained inside a columns block
  • Render the content via web-components api on shadow dom

Screenshots or video link

Layout in builder editor preview:

image
image1992×286 23.3 KB

Layout using web-components API (in shadow dom)

image
image946×1176 29.8 KB

Code stack you are integrating Builder with

LitElement or any stack that uses shadow roots

Reproducible code example

Note: stackblitz is in iframe, so to reproduce press ‘open in a new tab’ button, on upper right corner that appears after environment load.

Solutions & Workarounds

• Currently i’m implementing the styles that keeps missing inside my component.
• Ideally builder sdk could detect that is in a shadow root and inject styles inside that root.
• Alternatively builder sdk could expose the styles node or a preference/setting to passa a reference to the node / shadow-root that style should be inserted.

2

Hi @Pickachu,

A similar issue has been reported in past involving emotion library, you may refer to our forum post A/B test variations styling doesn’t often look right using emotion css styling with Next.js

Relevant:

3

Hi Manish, thanks for the fast response.

Yes, it’s indeed a similar issue. I’ll keep a tab on those.

And the workaround presented is an interesting concept, one could (1) server side render the builder section and parse the required styles.

(2) Another idea would be directly using the builder content API to implement a renderer for the components.

(3) And another one would be using the html api to render the builder content and extract styles.

Those solutions aren’t practical on our use case though:

Hi Manish, thanks for the fast response.

Yes, it’s indeed a similar issue. I’ll keep a tab on those.

And the workaround presented is an interesting concept, one could (1) server side render the builder content in Next.js and parse the required styles.

(2) Another idea would be directly using the builder content API to implement a renderer for the components.

(3) And another one would be using the html api to render the builder content and extract styles.

Those solutions aren’t practical on our use case though:

  1. Our tech stack does not contain Next.js and it would be impractical to implement it just for this workaround.

  2. We currently do not have enough resources to implement a custom builder content renderer, although that’s an idea i’d like to do.

  3. The html api does not return raw html of the rendered components, so styles are not present for parsing.

Anyhow, i’ll keep a tabs on the relevant issues you mentioned and updates to the builder sdk.

Also as a side note, there are some minor problems with content rendered inside shadow roots and the visual editor.

4

(accidentally duplicated post from above)