Enhanced Shadow DOM Support
Hi @AStoker I don't understand what is the real issue with your example (aside not loading GrapesJS styles inside your shadow dom). If you're attaching shadow dom, obviously, you can't do this container: '#gjs', but you're still able to pass HTMLElements as you're already doing in your example, so what is the issue?
Read full answer below ↓Question
What are you trying to add to GrapesJS? Better Shadow DOM support, allowing developers to render GrapesJS inside a Shadow element without having to specifically pass in elements rather than selectors in the configuration. Describe your feature request detailed When currently using element selectors, GrapesJS simply uses the document query selector. This does not work when rendering inside a Shadow DOM, as the document isn't the shadow root. I would like to be able to define a shadow root so that anything GrapesJS does/needs is contained within the shadow root. Example of using GrapesJS inside...
Answers (4)
Hi @AStoker I don't understand what is the real issue with your example (aside not loading GrapesJS styles inside your shadow dom). If you're attaching shadow dom, obviously, you can't do this container: '#gjs', but you're still able to pass HTMLElements as you're already doing in your example, so...
The issue is that I must pass HTML elements everywhere and cannot use selectors. This can become cumbersome to write as I must now use the shadow Dom's query selector for every panel, every element, anything that we hook into GrapesJS. Additionally, if there were the concept of a container, it woul...
I updated the JSFiddle so you can see what we need to do to get styles within Shadow DOM. But unfortunately the CSS that's automatically added by GrapesJS exists on the body and is both polluting the global stylesheets and pointless due to GrapesJS being inside the Shadow DOM.
Thanks for reporting this, @AStoker. Great suggestion about FEAT: Enhanced Shadow DOM Support! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: Listen to selector:add for CSS selector changes U...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3280
FEAT: Renderless
What are you trying to add to GrapesJS? I try to styling GrapesJS and positioning its elements (panels, buttons, canvas, etc.), it's annoyi...
Issue #3216
FEAT: Add referrerPolicy to image loading through asset manager
What are you trying to add to GrapesJS? I'm trying to add the Referer header to image loading through asset manager. Describe your feature...
Issue #3269
Translating html string
Great library! It meets all the requirements but one: website text translation. I've searched high and low through the issue queue and docs...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.