XSS対策のエスケープ、いつする派？

Question

テーマ、知りたいこと

XSS 対策を実装しているのですが、いつエスケープしたらいいのかいろいろなご意見があるようで疑問です。
使用言語は、HTML、CSS、JavaScript、PHP、MySQLです。

背景、状況

掲示板のコメントを例にします。

保存の際は JavaScript の fetch() を使い、PHP の PDO() を介し、MySQL でデータベースに保存しています。

逆に出力は PHP から {"id": 1, "comment": "<p>hello</p>"} のような JSON を echo し、 JavaScript で HTML を生成します。

この流れにあたって XSS 対策のタイミングは下記などいくつか考えられそうです。

タイミング

➀ データベースに保存する際にエスケープした値にしておく

<?php
$data = ["comment" => "<p>hello</p>"];
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➀はここでエスケープ
$stmt = $pdo->prepare("INSERT INTO comment_table (comment) VALUES (:comment)");
$stmt->bindParam(":comment", $data["comment"], PDO::PARAM_STR);
$stmt->execute();

➁ データベースには素のまま保存し、PHP から echo する際にエスケープする

$stmt = $pdo->query("SELECT * FROM comment_table WHERE id = 1"); 
$data = $stmt->fetch(PDO::FETCH_ASSOC); // この data は ["id" => 1, "comment" => "<p>hello</p>"] のような値 
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➁はここでエスケープ
echo json_encode($data);

③ データベースには素のまま保存し、PHP から echo する際も素のまま echo し、JSON を HTML として描画する際に JavaScript でエスケープする

fetch('getComment.php')
    .then(response => response.json())
    .then(data => { // この data は {"id": 1, "comment": "<p>hello</p>"} のような値 
        addNewComment(data);
    })
    .catch(error => {
    });

function addNewComment(data) {
    const ulElement = document.querySelector('.comment-list');
    const liElement = document.createElement('li');
    liElement.className = 'comment';
    liElement.textContent = escapeHtml(data); // ➂はここでエスケープ
    ulElement.appendChild(liElement);
}

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

いつエスケープするのがセオリーというか、安全というか、実装しやすいというか…
一体どうしたらいいのでしょうか？