В последнее время было много шума относительно веб-компонентов. Но что это, мы попробуем разобраться.
Согласно MDN Веб-компоненты - это набор технологий, которые помогают нам создавать настраиваемые повторно используемые компоненты. Эти компоненты можно легко инкапсулировать, и они не будут конфликтовать с остальной частью вашего приложения.
Лучше всего то, что они не зависят от какой-либо структуры и встроены в браузер.
Начнем с базового примера веб-компонента.
Здесь у нас есть HTML-файл, в котором мы видим, как определяется пользовательский тег basic-component (строка 17).
Он определяется basic-component.js ниже
Здесь класс Basic, расширяющий HTMLElement, создает настраиваемый элемент.
super() (line3) просто вызывает конструктор класса HTMLElement.
thiskeyword представляет пользовательский элемент, innerHTMLproperty которого мы обновляем.
this.getAttribute("name") извлекает имя свойства, переданное из HTML.
Но одно только определение этого не сработает, мы должны также подключить его к тегу HTML, который должен отображать его при вызове, это то, что делается в строке 10, соединяющей класс Basic с тегом basic-component и определение его.
Это то, что браузер отображает для приведенного выше кода.
Вы спросите, почему «Я должен быть пурпурным» КРАСНЫЙ, мы еще вернемся к этому.
Теперь мы рассмотрим спецификации, из которых состоят веб-компоненты:
Пользовательские элементы
Это позволяет нам определять настраиваемые элементы, которые можно использовать повторно. В приведенном выше примере мы видим, что Basic является настраиваемым элементом.
Мы объединили все функции, которые предоставляет Basic, и сопоставили их с тегом basic-component
Теневой DOM
Помогает инкапсулировать веб-компоненты, избегать утечек стилей.
Вы когда-нибудь задумывались, хотя HTML-тег видео имеет так много элементов управления, как воспроизведение / пауза, управление звуком и т. Д., Почему мы никогда их не видим.
Все, что мы видим, это
Это связано с тем, что все содержимое тега видео находится внутри теневой модели DOM.
Shadow DOM - это набор Javascript API, который помогает прикреплять и инкапсулировать дерево DOM к элементу. Это помогает сохранить абстрагированные функции элемента, которые можно стилизовать и написать сценарии независимо, не опасаясь столкновения.
Shadow DOM позволяет прикреплять скрытые деревья DOM к элементам в обычном дереве DOM.
Shadow Host присоединяется к узлу DOM, который указывает на Shadow Tree, а Shadow Root является корнем этого Shadow Tree.
Но как мы можем увидеть Shadow DOM видео-тега?
Это просто, перейдите в инструменты разработчика - ›настройки -› Установите флажок Показать теневую DOM пользовательского агента и перезагрузите страницу, теперь вы должны увидеть ее.
Теперь вы можете увидеть, из чего состоит тег видео.
Возвращаясь к теме «Я должен быть фиолетовым» КРАСНЫМ
Это связано с тем, что стиль просочился из веб-компонента, который имел тот же класс color, но другую реализацию.
Это было исправлено с помощью Shadow DOM, показанного ниже.
Здесь мы создаем шаблон HTML и добавляем его в теневой корень.
this.attachShadow({mode:"open"}) прикрепляет теневое дерево DOM.
строка 17 добавляет шаблон к теневому корню.
См. Эти ссылки для кода до и после реализаций Shadow DOM.
Модули ES
Спецификация модулей ES определяет включение и повторное использование документов JS на основе стандартов, модульности и производительности.
В приведенном выше примере мы увидели, что смогли использовать basic-component внутри нашего HTML, просто импортировав файл js, как показано ниже.
<script src="./basic-component.js"></script>
Это то, что предоставляют модули ES.
Шаблоны HTML
Это шаблоны, которые не отображаются до тех пор, пока об этом не попросят. Это помогает нам писать шаблоны разметки, которые можно использовать несколько раз. <template> и <slot> являются частью этих API.
В нашем примере мы использовали HTML-шаблон, который мы создали и прикрепили к теневому корню.
Теперь все эти API находятся на низком уровне, и работа с ними становится довольно утомительной и очень быстро.
Кроме того, их становится труднее поддерживать и строить по мере усложнения компонентов.
StencilJS решает эти проблемы за нас, создавая набор инструментов для создания повторно используемых компонентов.
В следующей статье мы увидим, как работать с StencilJS.
Надеюсь, вам понравилась эта статья. Вы можете связаться со мной в LinkedIn или оставить комментарий ниже в случае каких-либо предложений или вопросов.
