@alex4answ

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

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

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

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

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

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

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

Как вообще можно инкапсулировать какой-то html блок, в js component?
чтобы к внутреннему DOM имел доступ только этот компонент? (без Shadow Tree)
  • Вопрос задан
  • 107 просмотров
Решения вопроса 2
@gevru
Для этих целей лучше всего подойдет Svelte.js.

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

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

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

И вы увидите, что создать CustomElement без Shadow DOM невозможно.
А то что можно добиться больше походит на библиотеку типа OpenLayers (создающее элемент ol.Map) или Higthcharts (создающей диаграмму в вашей html) без гарантии стороннего вмешательства в создаваемые в DOM конструкции.
Потому что только с Shadow DOM можно обеспечить доступ к внутренностям элемента в DOM дереве исключительно обслуживающим его скриптам...
Ответ написан
xmoonlight
@xmoonlight Куратор тега JavaScript
https://sitecoder.blogspot.com
Советую includeHTML: всего одна функция! по загрузке html/js/css с возможностью кастомной обработки контента до вывода на экран.
Крайне простая (совсем без мануала) в использовании и рабочая либа.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы