Здравствуйте
Изучаю 4 столпа веб компонентов: shadow dom, html templates, html imports, custom elements. В процессе возник когнитивный диссонанс. Они, ахах, представляете, предлагают вручную присваивать значения DOM-елементам шаблона:
img.setAttribute("hidden", "");
el.querySelector("span").innerHTML = "YOBA";
Возник очевидный вопрос. Вот есть тысячи шаблонных движков, типа mustache: передаем текст с метками и объект со значениями - получаем текст со вкраплениями этих значений. А есть ли в природе движки, которые вместо текста принимают DOM-елемент, пробегаются по всем аттрибутам и текстовому контенту и заменяют «{{caption}}» на model.caption? Например:
<template id="pic-template">
<div yoba-hidden>
<img src="{{icon}}">
<span>{{Caption}}</span>
</div>
</template>
let model = { hidden: true; icon: "yoba.png"; caption: "YOBA" };
// el - это не текст, а готовый DOM элемент
let el = document.querySelector("#pic-template").content;
yoba_update(el, model)
PS: судимых и пьющих предлагающих React не беспокоить )
