Rendering HTML in LWC via lightning-formatted-rich-text

Question

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.

Answer 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;
}