0

We are trying to create a custom LWC component to render the HTML content using content managed REST api. We are getting the content, but when rendering in LWC the HTML is rendered with unformatted tags. We are using lightning-formatted-rich-text render the HTML.

1
  • Which tags are not correctly rendered?
    – Phil W
    Sep 9, 2020 at 15:23

1 Answer 1

1

Edit: Only use this as a last resort if you desperately want to render all of the html coming from the external service.

Use the HTML directive lwc:dom="manual" more info here. Since you are getting a HTML string from an external service, appendChild() or modifying innerHTML appears to be a good fit in this use case.

LWC HTML template:

<template>
    <div lwc:dom="manual" class="my-content"></div>
</template>

LWC JS module:

handleGetHtmlContent(htmlContent) {
    const container = this.template.querySelector('.my-content');
    container.innerHTML = htmlContent;
}
4
  • 1
    Allowing any HTML to be rendered exposes the page to HTML/JavaScript injection attacks (XSS or CSRF). This could be why some of the elements are not getting rendered for the OP when using the existing lightning components.
    – Phil W
    Sep 9, 2020 at 15:25
  • 1
    True. Assumption was that OP was attempting to render tags that are unsupported by the rich text component. Would advise sanitising the html to prevent XSS attacks.
    – akiradev
    Sep 9, 2020 at 15:37
  • There's probably a reason the tags are unsupported by the rich text component, where that reason is XSS or similar...
    – Phil W
    Sep 9, 2020 at 15:51
  • Right now the reason is that Salesforce have released a new accordian element to the knowledge article editor but this is not one of the tags supported by the lightning-formatted-rich-text component.
    – collymitch
    Jan 11 at 17:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .