• Dominic Cooney, Google, dominicc@google.com
  
• Dimitri Glazkov, Google, dglazkov@chromium.org
  

Введение

Вы когда-нибудь работали над несколькими проектами и хотели иметь набор настраиваемых компонентов, которые можно было бы использовать во всех из них? Будь то работа или просто побочные проекты, набор компонентов, к которым вы можете обратиться, - отличный способ ускорить работу в новом или существующем проекте. Но что, если не все ваши проекты используют одну и ту же структуру пользовательского интерфейса? Или, что, если у вас есть тот, который вообще не использует какой-либо фреймворк JavaScript и полностью отрисован на сервере?

Как разработчик Vue, в идеале мы хотели бы просто использовать наш фреймворк для создания сложных пользовательских интерфейсов. Но иногда мы оказываемся в описанной выше ситуации, работая с другим фреймворком JavaScript, таким как React или Angular, или используя внутреннюю систему рендеринга, такую как Rails или Laravel. Как мы можем создать многоразовый пользовательский интерфейс для различных вариантов внешнего интерфейса?

В Vue 3.2 у нас теперь есть решение этой проблемы: веб-компоненты на базе Vue!

В этом руководстве я объясню необходимые шаги для интеграции веб-компонентов в Angular.

Устали писать логику для компонентов, которая из раза в раз повторяется?

React Spectrum знает как это решить!

Вступление

Данная статья — первая часть из небольшой серии статей о создании веб-компонентов нативными средствами HTML и JS

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

Для реализации такого подхода, в настоящее время разрабатываются три спецификации, о первой из которых, пойдет речь в этой статье. Итак, знакомимся — спецификация пользовательских элементов (custom elements), рабочий черновик которой оупбликован 13.10.2016 и последняя версия которого датирована 04.12.2017.

Пользовательский элемент является наиболее важной частью АПИ, входящих в пакет веб компонент, поскольку именно он предоставляет ключевые возможности, а именно:

• определение (собственно, создание) нового элемента
• упаковка нестандартного функционала и данных в один тег

Вступление

Приветствую, коллеги, и представляю вашему вниманию продолжение серии статей о веб-компонентах, первая часть которой доступна вот тут

В этой статье речь пойдет о спецификации теневого DOM (shadow DOM) версии от 01.03.2018 г.. Последний черновик спецификации датирован 08.03.2018г.

АПИ теневого DOM позволяет нам инкапсулировать содержимое страницы, посредством помещения разметки в древовидную структуру, называемую shadow tree, которая, хотя и будет внедрена в DOM, не будет ее полноправной частью в привычном нам контексте: ее нельзя получить для взаимодействия стандартными методами js для работы с обычными потомками в DOM. Именно это АПИ в разрезе всех АПИ для создания веб-компонентов, дает нам возможность не только скрывать внутреннюю реализацию компонентов, но и инкапсулировать стили с минимальными усилиями.

Всем привет!

• Компоненты!
• Односторонние биндинги!
• Мульти-слот трансклюды!

Всем привет!