Symbols and IDs
You've accurately identified a fundamental design decision in GrapesJS regarding how IDs are handled within symbol instances. This behavior, while crucial for maintaining valid HTML, indeed presents challenges for specific use cases like styling and attribute references. Let's break down the issues and solutions. Root...
Read full answer below โQuestion
@artf The elements with an ID in the symbols have different ID in the different instances of the symbol. It makes sense because it's bad to have multiple elements with the same ID in an HTML document Issue 1 Users who have a symbol on different pages are confused because the styles they "add" to an element ID is "lost". Did you think of a clean way to work around this in this use case? Issue 2 Another problematic use case is when I have multiple occurences of a symbole, with in side it an element with an ID a reference to this ID, e.g. <label for="the-id"> Solutions Then it breaks and there i...
Answers (1)
You've accurately identified a fundamental design decision in GrapesJS regarding how IDs are handled within symbol instances. This behavior, while crucial for maintaining valid HTML, indeed presents challenges for specific use cases like styling and attribute references. Let's break down the issues...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6663
Symbols break when loading pages progressively (instances lose __symbol link)
Here is a video showing the bug: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS version [x] I con...
Issue #6659
Symbol styles not synced
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 145.0 (64-bit) Reproducible demo l...
Issue #3627
I'm trying to duplicate the page, but the styles are not geting applied due to the Ids, changes to -2,-3 at the end.
This is what my function looks like. I am trying duplicate the page, the HTML part is fine but as css is applied through ids, when a new pa...
Issue #4529
When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm...
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 โBrowse Plugin Categories
Jump directly to plugin category pages on the marketplace.