20

I am currently having an issue to show the content fetched from salesforce database to UI. The data is stored in HTML form and I want it to show on UI using LWC without escaping HTML. Previously we were having specific component in lightning and VF page to unescape HTML and show the HTML content on UI. I am looking something similar to it.

Here is the code,

<template if:true={teamRecords} >
    <template for:each={teamRecords} for:item="team" for:index="index">
         <div class="col-md-3 col-sm-3 col-xs-12" key={team.item.siteComponent.Id}>
              <h4>{team.item.siteComponent.Title__c}</h4>
              <div lwc:dom="manual"> 
                   {team.item.siteComponent.Description__c} 
                   <!--I want to use the Unescape HTML here-->
              </div>
          </div>
    </template>
</template>

2 Answers 2

31

You can use:

<lightning-formatted-rich-text value={team.item.siteComponent.Description__c}></lightning-formatted-rich-text>
4
  • 2
    Welcome to SFSE! Please take the tour and read How to Answer. Right now, this answer is a bit sparse and I'd like to see you add some more information. This answer is close to what we call a code dump (where you provide code as a solution, but don't explain how it works or how it solves the issue at hand). This answer would be improved if you would add a link to documentation, and quote the part of that documentation that goes over how it handles HTML input.
    – Derek F
    Commented Apr 12, 2019 at 11:44
  • Thanks for the feedback @DerekF Commented Apr 23, 2019 at 13:32
  • Just to make it clear also for the others - this is the correct answer, though not documented enough. I was not sure if it is (from the comments above). Commented Sep 30, 2019 at 16:01
  • +1 This is awesome, thanks for sharing!
    – Raul
    Commented Mar 1, 2020 at 17:37
21

You should be able to inject the raw HTML via Element.innerHTML. You will also need to make sure to add the lwc:dom="manual" directive on the container element to indicate to LWC that you are tacking the control over what will be rendered on the element. Live example

<template>
    <div lwc:dom="manual"></div>
</template>
import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    renderedCallback() {
        this.template.querySelector('div').innerHTML = '<marquee>Untrusted markup</marquee>';
    }
}
2
  • Hi @pmdartus, I have added more description to the question. Commented Feb 25, 2019 at 11:04
  • This should be accepted answer. In fact, I tried to re-upvote this after long time :D
    – Wookie88
    Commented May 21, 2020 at 16:20

You must log in to answer this question.

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