Skip to content

Unable to Override specific CMSParagraphComponent and Dynamically Inject Styles & Scripts in SAP SpartacusΒ #20554

@sixthcodebrewer

Description

@sixthcodebrewer

Description:

We are currently facing an issue while using SAP Spartacus release-221141, where we are unable to override a specific CMS component – CMSParagraphComponent.

πŸ“Œ Context:
We are using SAP Spartacus as our frontend framework and rendering CMS-driven content from SAP Commerce Backoffice.

The CMS team is managing content such as FAQs (Questions and Answers) using the CMSParagraphComponent.

The HTML content is returned correctly from the backend and rendered on the frontend via Spartacus.

❗ Issue:
Component Override Not Working:
Attempts to override CMSParagraphComponent globally or locally are not being honored. While we try to customize it, the changes do not reflect in the rendered output.

In fact, wherever the component is used across the app, it seems to get replaced entirely, instead of allowing a scoped override.

Angular Sanitization Limitation:
Since Spartacus is built on Angular, it automatically sanitizes inline <style> and <script> tags coming from the CMS for security reasons.

This prevents us from injecting custom interactions and styles directly through the CMS content.

Proposed Workaround:

  • We are considering injecting styles and event listeners manually from the frontend after rendering the component.

  • However, due to the override issue with CMSParagraphComponent, even this workaround becomes ineffective because our custom component isn't rendered at all, if rendered it would happen all the place.

πŸ§ͺ Observations:
HTML content from the backend is rendered correctly, but Angular sanitization strips out critical styling or scripting logic.

Attempts to use CmsComponentMappingService and provide a custom component for CMSParagraphComponent are ignored or replaced inconsistently.

The component gets replaced globally instead of allowing for controlled rendering.

πŸ” Expected Outcome:

  • Ability to successfully override CMSParagraphComponent and handle it via a custom Angular component.

  • Support for post-render script/style injection via the frontend.

  • Option to disable sanitization or allow safe-listed custom interactions, if possible.

πŸ“© Request for Support:
We would appreciate guidance on the following:

Is there an official or recommended way to override CMSParagraphComponent in Spartacus without affecting global usage?

How can we safely inject styles and scripts post-render while respecting Angular security policies?

Can you suggest a Spartacus-compliant approach to render interactive CMS content (like dynamic FAQs) effectively?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions