コンポーネントへのカスタム HTML の追加

コンポーネントにカスタム HTML を追加することで、メールコンテンツビルダーで使用できます。

テンプレートのマークアップで、innerHTML コンテナに入れる要素に、ishtmlcontainer="true" という特殊な属性と値を指定します。

renderedCallback() は他の場所では使用しないでください。HTML が生成されたときに処理されなくなります。

テンプレート内で、innerHTML コンテナを指定する箇所に、ishtmlcontainer="true" の属性と値を挿入します。

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

JavaScript ファイルで、htmlValue 属性の setter と getter を作成します。今は空のままにしておきます。

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

renderedCallback() メソッドを追加し、その中で innerHTML プロパティを含む要素 (attachmentPoint と呼びます) への参照を保持するインスタンス変数を作成します。その要素の innerHTML プロパティに、作成したプロパティの値を割り当てます。

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

セッターで、作成したインスタンス変数の割り当てに関するチェックを追加します。新しい値をインスタンス変数の innerHTML 属性に割り当てて、その値を非公開プロパティに割り当てます。getter で、非公開プロパティの値を返します。

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}

.js-meta.xml ファイルで、プロパティのデフォルト値やその他のプロパティを定義します。

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>

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。