Веб-компоненты без написания HTML внутри Javascript - PullRequest
Новая
       21

Веб-компоненты без написания HTML внутри Javascript

0 голосов
/ 05 мая 2018

Я читал и попробовал несколько реализаций веб-компонентов, которые мне известны, и что мне не нравится во всех из них, так это то, что они пишут HTML-код для компонента внутри Javascript / JSX / Typescript.

Фреймворки / реализации, через которые я прошел :

Полимер : Полимер 1 и 2 чувствовали себя хорошо, так как они делали все определения с использованием импорта HTML и имели отдельный HTML и код JS. Но с Polymer 3 они также используют React, как синтаксис, пишущий HTML внутри JS, что мне не нравится.

Vanilla Webcomponents: Было удивительно видеть, что даже спецификации Vanilla Web-компонентов похожи на React с HTML внутри кода JS: https://www.webcomponents.org/introduction, что мне не нравится.

Трафарет: Хотя этот инструмент выглядит многообещающе, у меня все еще остается та же проблема, что мне нужно написать HTML-код, необходимый для компонента внутри JS, и затем он преобразует его в ванильный JS.

X-Tag: Та же проблема, HTML внутри JS.

Есть ли какая-либо реализация, где мы не пишем HTML в Javascript для использования веб-компонентов?

Моя главная причина этого - Разделение проблем , и я не в состоянии хорошо с ним справиться, так как обычно Интернет казался хорошим разделением скелета, стилей и DOM-разделений в виде файлов HTML, CSS и JS и теперь мы объединяем все, что мне неприятно.

И это одна из главных причин, почему мне не нравится React, когда мы пишем HTML-подобный синтаксис в javascript.

1 Ответ

0 голосов
/ 06 мая 2018

С ванильными веб-компонентами вы можете разделить HTML, Javascript и CSS на разные файлы. Вам решать!

Я разработал несколько готовых приложений, в которых каждый компонент (пользовательские элементы) был определен в 3 файлах: HTML, JS и CSS.

Содержимое HTML помещается в элемент <template> и клонируется для вставки в пользовательский элемент при его создании.

HTML-файл может быть импортирован во время выполнения через импорт HTML или с fetch() или XMLHttpRequest объектом. Кроме того, он может быть объединен (автоматически) с Javascript и CSS во время сборки, чтобы образовать только один файл для загрузки.

Я не знаю других фреймворков, но полагаю, что для некоторых из них это тоже возможно.

...