Кажется это называется hyperscript
https://github.com/hyperhype/hyperscriptВ самом репозитории есть index.js с реализацией
Но, поскольку вы это делаете в учебных целях, то мне кажется, это оверхед.
Используйте innerHTML и шаблонные строки, и это должно работать достаточно хорошо.
Про скрытие и отображение "слоёв" разметки, это хорошая идея, однако это достаточно ресурсоёмко по памяти. Если в задаче нет ограничений то хороший вариант.
Будет хорошим решением включать такие блоки модификатором к родителю в котором положите эти слои
Что-то вроде
.main > * { display: none; }
.main_about .main__about,
.main_home .main__home {
display: block;
}
Однако в этом случае так же важно следить чтобы не было одинаковых атрибутов id в разметке, поскольку это может привести к ошибкам при работе с <label><input> и предупреждениям в консоли devTools )