Add Custom HTML To a Component

You can add custom HTML to your components for use in the email content builder.

Specify a special attribute and value in the template markup to the element to be in the innerHTML container: ishtmlcontainer="true".

In your template, attach the attribute and value ishtmlcontainer="true" to where you want to specify an innerHTML container.

1<template>
2  <div ishtmlcontainer="true" lwc:dom="manual"></div>
3</template>

In your JavaScript file, create a setter and getter for your htmlValue attribute. Leave them empty for now.

1@api
2set htmlValue(value) {
3
4}
5
6get htmlValue() {
7
8}

Add a renderedCallback() method in which you create an instance variable to hold a reference to the elements holding the innerHTML property (referred to as attachmentPoint). On that element’s innerHTML property, assign it the value of the property you just created.

1renderedCallback() {
2    this.attachmentPoint = this.template.querySelector('div[ishtmlcontainer=true]');
3    this.attachmentPoint.innerHTML = this.htmlValue;
4}

In the setter, add a check for the assignment of the instance variable you created. Assign the new value to the instance variable’s innerHTML attribute and assign the value to a non-public property. In the getter, return the value of the non-public property.

1import { LightningElement, api } from "lwc";
2
3export default class CustomInner extends LightningElement {
4  @api
5  set htmlValue(value) {
6    if (this.attachmentPoint) {
7      this.attachmentPoint.innerHTML = value;
8    }
9    this._htmlValue = value;
10  }
11
12  get htmlValue() {
13    return this._htmlValue;
14  }
15
16  renderedCallback() {
17    this.attachmentPoint = this.template.querySelector("div[ishtmlcontainer=true]");
18    this.attachmentPoint.innerHTML = this.htmlValue;
19  }
20}

Define default values and other properties of the property in the .js-meta.xml file.

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="CustomInner">
3    <apiVersion>53.0</apiVersion>
4    <isExposed>true</isExposed>
5    <masterLabel>Custom Inner HTML</masterLabel>
6    <description>Display HTML-enhanced text</description>
7    <targets>
8        <target>lightningStatic__Email</target>
9    </targets>
10    <targetConfigs>
11        <targetConfig targets="lightningStatic__Email">
12            <property name="htmlValue" type="String" required="true" default="YOUR CUSTOM INNER HTML HERE"/>
13            ...
14        </targetConfig>
15    </targetConfigs>
16</LightningComponentBundle>

See Also