LWCで改行などのHTMLタグを含んだ文字列をHTMLとして描画する方法
Lightning Web Components開発の備忘録です。Apexのレスポンスとして受け取ったテキストが、HTMLとして記述されているケースがあったとします。具体的には以下のような値です。
'これはテキストです。<br/>HTMLタグを含んでいます。'
これを画面に表示したいと考えたとき、単純に考えつくHTMLとJSはそれぞれ次のようになると思います（話を簡単にするため、Apexから取得ではなく直接変数にメッセージを定義しています）。
<!-- HTML -->
<template>
<p>{message}</p>
</template>
// JS
import { LightningElement } from 'lwc';
export default class Message extends LightningElement {
message = 'これはテキストです。<br/>HTMLタグを含んでいます。';
}
この表示結果として期待するところは以下の通りです。
これはテキストです。
HTMLタグを含んでいます。
しかし、ご想像の通り実際は次のように<br/>も文字列として表示されます。
これはテキストです。<br/>HTMLタグを含んでいます。
期待通りの表示を得るためには、lightning-formatted-rich-textという標準コンポーネントを使用します。このコンポーネントを使うとコードは次のようになります。変更するのはHTMLだけでOKです。
<!-- HTML -->
<template>
<p>
<lightning-formatted-rich-text value={message}></lightning-formatted-rich-text>
</p>
</template>
これで期待通りの結果を得ることができます。ちなみに公式のドキュメントによるとコンポーネントに渡されたvalueはサニタイズされていて、XSS対策が取られているそうです。試しに'<script>alert("hello!");</script>'をvalueに渡したところ、確かにJSは実行されませんでした。