Как правильно сделать веб компонент js?

Question

[alex4answ]

Добрый вечер.

Прочитав учебник, нужна практика + появилась небольшая идейка для github фан проектика.
Например я хочу сделать стену с фотографиями (например как инстаграм ), и у каждого поста есть свои действия.

Очевидно каждый пост должен быть отдельным компонентом.
Но, html строится сервером, как мне лучше построить работу с ним?

Вот мои варианты:
1. пишу класс компонента, в его конструктор передаю html object полученный через document.querySelector и далее работаю уже с объектом этого класса

2. customElements, назначить на html записей свой класс, и работать уже с ним

Как вообще это делается, подскажите пожалуйста, где я могу найти адекватные примеры, как делаются веб компоненты, без всяких реактов и прочих, ванильный js ?

Как вообще можно инкапсулировать какой-то html блок, в js component?
чтобы к внутреннему DOM имел доступ только этот компонент? (без Shadow Tree)

Comments

[Сергей Соколов]

MDN листали?

Answer 1

[gevru]

Для этих целей лучше всего подойдет Svelte.js.

Svelte - это компонентно-ориентированный фреймворк.

С его помощью можно создать как CustomElement, которые можно встроить как в проект на чистом JS, так и в проект на любом другом фреймворке (React, Angulat, Vue).

На результате сборки проекта в режиме CustomElements можно наглядно посмотреть как создается и встраивается в Html созданный элемент.

И вы увидите, что создать CustomElement без Shadow DOM невозможно.
А то что можно добиться больше походит на библиотеку типа OpenLayers (создающее элемент ol.Map) или Higthcharts (создающей диаграмму в вашей html) без гарантии стороннего вмешательства в создаваемые в DOM конструкции.
Потому что только с Shadow DOM можно обеспечить доступ к внутренностям элемента в DOM дереве исключительно обслуживающим его скриптам...

Comments

[alex4answ]

тк учусь, сторонние либы и тп использовать не буду, Спасибо за подсказку, перечитал про веб компоненты, начал делать с Shadow DOM

Answer 2

[xmoonlight]

Советую includeHTML: всего одна функция! по загрузке html/js/css с возможностью кастомной обработки контента до вывода на экран.
Крайне простая (совсем без мануала) в использовании и рабочая либа.