17

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>
30

You can use:

<lightning-formatted-rich-text value={team.item.siteComponent.Description__c}></lightning-formatted-rich-text>
4
  • 1
    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
    Apr 12 '19 at 11:44
  • Thanks for the feedback @DerekF Apr 23 '19 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). Sep 30 '19 at 16:01
  • +1 This is awesome, thanks for sharing!
    – Raul
    Mar 1 '20 at 17:37
16

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. Feb 25 '19 at 11:04
  • This should be accepted answer. In fact, I tried to re-upvote this after long time :D
    – Wookie88
    May 21 '20 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.