Lwc: Rendering raw HTML

[priandsf]

SSR
Provide a way to render inner HTML in the component template, similar to React dangerouslySetInnerHTML. As of today, rendering HTML requires some DOM manipulation in renderedCallback, which might not be enabled for SSR.
It is up to the developer to sanitize the JS before injecting it.

[caridy]

I provided some suggestions about how to achieve this during last meeting, but I forgot the details, I will have to think about it again.

[priandsf]

Yeah, the suggestion was to generate a template server side and compile it. But this is not practical in our case as we have dynamically generated HTML (ex: content slots, data coming from the CRM...). The compilation step will slow down the rendering of the page, and will be very difficult to cache.

[pmdartus]

Clarification question, would you expect the template that you inject to contain LWC components that the engine would need to pick up? Or pure HTML to display for example rich text?

I found myself in the same situation in the app that I have been building as a side-project, and I ended up having to do a querySelector and an innerHTML. This approach is a little cumbersome, but it's doing the trick. I agree with you a directive for this would be welcome, like v-html in Vue or dangerouslySetInnerHTML in React.

[priandsf]

For us, it is to display rich text content so it is pure HTML. We used the same approach so far with innerHTML, but this might not work with SSR if we disable renderedCallback in this context.

[pmdartus]

Ahh, I haven't seen this issue from this angle. I guess it makes complete sense then.