LWC LWD:DOM MANUAL set inner html

lwcLwcDomManualInnerHtml.md

LWC DOM Manual

Render HTML markup dynamically

Html Template

<!-- LWC:DOM MANUAL -->
<div lwc:dom="manual" class="slds-var-p-around_x-small slds-scrollable_y templatePreviewMarkup">
    <!-- {templateHighlightedBody} -->
</div>

JS

const replacePatternSML = `<span class="salesforceMergeField"><mark>$1</mark></span>`; 
//.......
setTemplateHighlightedBodyMarkup() {
    return;
    // select lwc:dom="manual" element and render it manually
    const templatePreviewMarkup = this.template.querySelector('div.templatePreviewMarkup');
        if (templatePreviewMarkup) {
            templatePreviewMarkup.innerHTML = `${this.templateHighlightedBody}`;
        }
    }