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.

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

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.

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.

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

See Also

• renderedCallback()
• Configure a Component for the Email Builder