How to override Specific CMSParagraphComponent in SAP Spartacus and inject custom...

We're using SAP Spartacus as the frontend and fetching dynamic content from SAP Commerce Backoffice. Our CMS team is managing FAQ-style content using the CMSParagraphComponent.

Problem: The content comes through fine as raw HTML.

We need to inject styles and attach event listeners to this content on the Angular frontend.

However, Angular sanitizes any inline or tags, which prevents dynamic behavior from working if injected from the CMS.

We tried to override CMSParagraphComponent, but:

Our custom component doesn’t render.

In some cases, it gets globally replaced wherever the original CMSParagraphComponent is used.

What we’ve tried:

• 
  Using CmsComponentMappingService to map CMSParagraphComponent to a custom Angular component.
  
  
• 
  Injecting dynamic content via Renderer2 in Angular after view initialization.
  
  
• 
  Applying safe transformations via a pipe and DomSanitizer.
  

What we need:

• 
  A way to override or wrap specific CMSParagraphComponent so we can safely post-process and inject styles/scripts.
  
  
• 
  OR a pattern to allow scoped overrides that don’t affect the entire app.
  
  
• 
  Any best practices around rendering interactive CMS content while respecting Angular's sanitization policies.
  
  <div class="faq cms-paragraph-wrapper">
  <h3>What is your return policy?</h3>
  <p>We offer a 30-day return window...</p>
  <button class="toggle-answer">Toggle Answer</button>
  
  <!-- NOTE:
  This component comes from the CMS via CMSParagraphComponent.
  We need to attach an event listener *on the frontend only*,
  and only for this specific instance/component to avoid global side effects.
  Angular sanitizes scripts/styles, so we cannot inject logic from CMS.
  -->
  </div>

Continue reading...