Reutilização de componentes HTML

Vc pode usar um template engine como o Nunjucks.

Basicamente essas engines usam uma linguagem propria quase tão poderosa quanto qualquer linguagem de programação.

No caso do Nunjucks, pra vc inserir algum trecho HTML dependendo de alguma condição vc faria algo assim:

{% if variable %}
<div>Testando!!!</div>
{% endif %}

Ou um for:

<h1>Posts</h1>
<ul>
{% for item in items %}
  <li>{{ item.title }}</li>
{% else %}
  <li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>

Há várias outras funcionalidades e diferente dos frameworks e bibliotecas que citou, depois que a engine processa seu template, o resultado final é puramente HTML.

O problema pode ser a parte de configuração que é um pouco chatinha. Eu usei o Nunjucks para um projeto que fiz um tempo atrás e achei satisfatório.

Eu usei ele em conjunto com o Gulp que é um task runner. Não sei se vc tem familiariadade com o conceito de task runners, mas vale a pena estudar a respeito.

O Gulp me ajudou a integrar o Nunjuks no meu projeto.

Outra alternativa pode ser vc usar um desses geradores de sites estáticos, há vários deles, vc pode ver uma lista aqui:

Atualmente no meu blog eu estou usando o Hugo. Se tiver curiosidade sobre como estou usando, vc pode ver o meu repositório aqui.

Também já usei o Jekyll pra fazer um site pra um cliente e funcionou bem, embora eu prefira o Hugo mesmo.

Vc pode usar o json2html https://json2html.com

O jeito fácil de fazer: pra vc inserir algum trecho HTML dependendo da condição vc faria:

let transform = {'<>':'div','class':'card','html':[
                {'<>':'img','alt':'this is our logo','src':'logo.jpg'},
                {'<>':'p','text':'Welcome to json2html!'}
            ]};

document.write( json2html.transform({},transform) );

e isso gera

<div class="card">
<img src="logo.jpg"src="this is our logo"></img>
<p>Welcome to json2html!</p>

Não compensa. É mais prático tratar a reutilização no servidor e responder pro navegador o html já processado.