Custom component styles are not applied after deletion and re-addition

I'm facing a similar issue, where the re-added component has the correct styles property:

But if I use the "View Code" button, the CSS was not injected, in my case they aren't even in the DOM. The component itself works, because when it was first added, the styles were in fact injected and working ok. It's only after removing and re-adding that it fails.

I've also tested using the "component.replaceWith(newComponent)" function instead of "component.remove()" and "editor.addComponents(newComponent)".

Code example:

//Component Definition
domComponents.addType('my-type', {
    model: {
        defaults: {
            tagName: 'div',
            name: 'My Type',
            attributes: { 'data-gjs-type': 'my-type' },
        }
    }
});

//Adding component (here the styles work)
editorInstance.Components.addComponent({
    type: 'my-type',
    attributes: { id: 'my-id' },
    components: //several text and image components,
    styles: '#my-id #ir2o {\n  padding: 5px;\n  left: 94px;\n  top: 120px;\n  position: absolute;\n}\n\n ....'
}, { at: 0 });

//Retrieving the component in another operation
let myComponent = editorInstance.Components.getComponents().find((component: Component) => component.getType() === 'my-type');

//Replacing it (or removing and re-adding) with an updated one
myComponent.replaceWith({
    type: 'my-type',
    attributes: { id: 'my-id' },
    components: //Updated several text and image components,
    styles: '#my-id #ir2o {\n  padding: 5px;\n  left: 94px;\n  top: 140px;\n  position: absolute;\n}\n\n ....' //Updated styles
});

//The components are successfully added but the updated styles are not injected.

@mdmontesinos your usage is not correct, styles has to be defined at the component definition, and it's not expected to change. Also, it's wrong to use IDs for component definition if the component is expected to be reused, the ID will be recreated, rely on classes, especially for styles.

But the report from @shery seems to be legit; there might be an issue with the caching of styles.

@artf I'm using an ID because there will always be a single instance of that component in my project. My use case is that a component is designed externally to be used as a "background" and then imported into projects that use it. Therefore, when the external component is updated, I need to also update it in my project, which is why I'm trying to recreate it, and it might have its components or styles modified. Is there any way that I can force the styles to be refreshed?

Thanks for reporting this, @shery.

Great question about Custom component styles are not applied after deletion and re-addition. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!