1

I'm fairly new to LWC development so please let me know if I'm heading the wrong way here. I want to convert a string of html tags to html and to render it on my lightning component.

I followed the answer on this thread which suggests to create a new template and attach it, so I tried the following:

Playground

HTML:

<template>
    {text}
</template>

Javascript:

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    get text(){
        var email = '<p>Dear Rosario,&nbsp;<br /> <br /> <br /> I saw your reply in the mail of case number&nbsp;2227. Please let&#39;s continue messaging here regarding the Delta PC issue and it&#39;s upcoming session, to make sure we are all aligned.&nbsp;<br /> <br /> As I wrote in the previous mail, our team will be ready on Monday, Oct 7, at 2 pm Jakarta time.<br /> &nbsp;</p';
        var template = document.createElement('template');
        email = email.trim(); 
        template.innerHTML = email;
        return template.content.firstChild;
    }
}

output : [object HTMLParagraphElement]

3

You cannot directly set .innerHTML property of HTMLElement unless you container element has been enabled lwc:dom="manual" directive. HTML Template Directives

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

export default class App extends LightningElement {
    renderedCallback() {
        this.template.querySelector('.email-text').innerHTML = 
        `<p>Dear Rosario,&nbsp;
             <br /> <br /> <br /> 
             I saw your reply in the mail of case number&nbsp;2227. Please let&#39;s continue messaging here regarding the Delta PC issue and it&#39;s upcoming session, to make sure we are all aligned.&nbsp;
             <br /> <br /> 
             As I wrote in the previous mail, our team will be ready on Monday, Oct 7, at 2 pm Jakarta time.
             <br /> &nbsp;
         </p>`;
    }
}

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.