AdoptStylesheet not supported in grapesJS

Quick answerby artf❤ 1

This issue is due to how AdoptStylesheet works and it's similar to this one from lit-element. Basically, you can't share the same CSSStyleSheet across multiple documents, so you have to recreate it manually, here below is a code for custom elements, in order to support adoptedStyleSheets.

Read full answer below ↓

Question

Version: You can get the version by typing grapesjs.version into the console 0.17.22 Are you able to reproduce the bug from the demo?[x] Yes[ ] No What is the expected behavior? Should be able to see the web component in similar fashion as it is outside the grapesJS container Describe the bug detailed Grapesjs not able render the css from constructable stylesheet. What is the current behavior? Able to load the component without styling Are you able to attach screenshots, screencasts or a live demo?[x] Yes (https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark...

Answers (3)

artf• Aug 11, 2021

vasicvuk• Dec 28, 2023

Is there any solution for using lit-element components 3.X with grapesJS?

GJSBlock• May 17, 2026

Thanks for reporting this, @GaikwadShubham. The issue with AdoptStylesheet not supported in grapesJS appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state. What to try:...

View full discussion on GitHub →