Как установить web components
Введение в веб-компоненты (Web Components) без фреймворка
Это руководство представляет собой введение в стандартные веб-компоненты, написанные без использования инфраструктуры JavaScript. Вы узнаете, что это такое и как адаптировать их для своих собственных веб-проектов. Необходимо хорошее знание HTML5, CSS и JavaScript.
Что такое веб-компоненты (Web Components)?
В идеале ваш проект разработки должен использовать простые независимые модули. У каждого должна быть четкая единственная ответственность. Код инкапсулирован: нужно только знать, что будет выводиться при заданном наборе входных параметров. Другим разработчикам не нужно проверять реализацию (если, конечно, нет ошибки).
Большинство языков поощряют использование модулей и повторно используемого кода, но разработка браузера требует сочетания HTML, CSS и JavaScript для отображения содержимого, стилей и функциональности. Связанный код может быть разделен на несколько файлов и может неожиданно конфликтовать.
Фреймворки и библиотеки JavaScript, такие как React, Vue, Svelte и Angular, облегчили некоторые головные боли, представив свои собственные компонентные методы. Связанные HTML, CSS и JavaScript можно объединить в один файл. К сожалению:
Десять лет назад многие из понятий, введенных JQuery были добавлены в браузеры (такие как querySelector, ближайший, ClassList, и так далее). Сегодня поставщики внедряют веб-компоненты, которые работают в браузере без фреймворка.
На это ушло время. Алекс Рассел сделал первоначальное предложение в 2011 году. Полимерный фреймворк Google (polyfill) появился в 2013 году, но прошло три года, прежде чем его собственные реализации появились в Chrome и Safari. Были некоторые напряженные переговоры, но Firefox добавил поддержку в 2018 году, а затем Edge (версия Chromium) в 2020 году.
Как работают веб-компоненты (Web Components)?
Рассмотрим HTML5 элементы, которые позволяют пользователям воспроизводить, приостанавливать, перематывать и перематывать мультимедиа с помощью ряда внутренних кнопок и элементов управления. По умолчанию браузер обрабатывает макет, стиль и функциональность.
Наконец, вы можете добавлять контент в Shadow DOM с помощью повторно используемых HTML-шаблонов, которые предлагают некоторую конфигурацию с помощью тегов.
Стандартные веб-компоненты рудиментарны по сравнению с фреймворками. Они не включают в себя такие функции, как привязка данных и управление состоянием, но у веб-компонентов есть ряд неоспоримых преимуществ:
Ваш первый веб-компонент
Для начала добавьте элемент на любую веб-страницу. (Закрывающий тег важен: вы не можете определить самозакрывающийся тег.)
Создайте файл сценария с именем hello-world.jsи загрузите его с той же HTML-страницы (модули ES автоматически откладываются, поэтому их можно разместить где угодно — но чем раньше на странице, тем лучше):
Создайте HelloWorldкласс в своем файле сценария:
Веб-компоненты должны расширять интерфейс HTMLElement, который реализует свойства и методы по умолчанию для каждого элемента HTML.
Примечание. Firefox может расширять определенные элементы, такие как HTMLImageElementи HTMLButtonElement. Однако они не поддерживают Shadow DOM, и эта практика не поддерживается в других браузерах.
Браузер запускает connectedCallback()метод всякий раз, когда пользовательский элемент добавляется в документ. В этом случае изменяется внутренний текст. (Теневой DOM не используется.)
Класс должен быть зарегистрирован с вашим настраиваемым элементом в CustomElementRegistry :
Загрузите страницу, и появится надпись «Hello World». Новый элемент можно стилизовать в CSS с помощью hello-world <… >селектора:
Создать компонент
Компонент является более сложным. Этот пример может генерировать количество слов или количество минут, чтобы прочитать статью. Интернационализация API можно использовать для вывода цифр в правильном формате.
Могут быть добавлены следующие атрибуты элемента:
На страницу можно добавить любое количество элементов. Например:
Конструктор WordCount
Новый WordCountкласс создается в модуле JavaScript с именем word-count.js:
Статическое wordsсвойство хранит количество слов на странице. Он рассчитывается один раз и используется повторно, поэтому другим элементам не нужно повторять работу.
constructor()Функция выполняется при создании каждого объекта. Он должен вызвать super()метод для инициализации родителя, HTMLElementа затем при необходимости установить другие значения по умолчанию.
Прикрепите теневой DOM
Конструктор также определяет теневой DOM attachShadow()и сохраняет ссылку в shadowсвойстве, поэтому его можно использовать в любое время.
modeМожет быть установлен:
Этот компонент добавляет простой текст, и внешние изменения не критичны. Использование openдостаточно, чтобы другой JavaScript на странице мог запрашивать контент. Например:
Наблюдение за атрибутами WordCount
К этому веб-компоненту можно добавить любое количество атрибутов, но он касается только четырех, перечисленных выше. Статическое observedAttributes()свойство возвращает массив свойств для наблюдения:
this.updateCount();Вызов делает компонент, поэтому он может быть повторно запущен, если атрибут изменен после того, как она отображается в первый раз.
WordCount Визуализация
connectedCallback()Метод вызывается, когда веб — компоненты добавляются к объектной модели документа. Он должен запустить любой требуемый рендеринг:
Две другие функции доступны в течение жизненного цикла веб-компонента, хотя здесь они не нужны:
updateCount()Метод вычисляет количество слов, если это не было сделано раньше. Он использует содержимое первого тега или страницы, когда оно недоступно:
Затем он обновляет Shadow DOM счетчиком слов или минут (если minutesатрибут установлен):
Затем регистрируется класс веб-компонента:
Раскрытие теневого DOM
Теневой DOM манипулируют, как и любым другим элементом DOM, но у него есть несколько секретов и подводных камней…
Объемный стиль
Стили, установленные в Shadow DOM, привязаны к веб-компоненту. Они не могут влиять на внешние элементы страницы или быть изменены извне (хотя некоторые свойства, такие как font-family, цвета и интервал, могут передаваться каскадом):
Вы можете настроить таргетинг на сам элемент веб-компонента с помощью :hostселектора:
Стили также можно применять, когда веб-компоненту назначен определенный класс, например :
Переопределение стилей теней
Переопределить стили с ограниченной областью видимости непросто, и, вероятно, этого не должно быть. Есть несколько вариантов, если вы хотите предложить уровень стиля потребителям вашего веб-компонента:
События теневой DOM
Веб-компоненты могут присоединять события к любому элементу в теневой модели DOM так же, как и в модели страницы. Например, чтобы прослушать нажатие кнопки:
Событие всплывет на внешнюю страницу DOM, если вы не предотвратите это с помощью e.stopPropagation(). Однако событие перенаправлено; внешняя страница будет знать, что это произошло с вашим настраиваемым элементом, но не знает, какой элемент Shadow DOM был целью.
Определение HTML внутри вашего класса может быть непрактичным. Шаблоны HTML определяют фрагмент HTML на вашей странице, который может использоваться любым веб-компонентом:
HTML-шаблоны определяются внутри тега. Идентификатор обычно определяется, поэтому вы можете ссылаться на него:
Код класса может получить этот шаблон.contentи клонировать его, чтобы создать уникальный фрагмент DOM перед внесением изменений и обновлением Shadow DOM:
Использование слотов для шаблонов
Затем определите компонент:
Элемент с slotатрибутом, установленным на «heading»(
), вставляется в шаблон, где появляется.
Не имеет имя слота, но он используется в следующий доступный неназванный. Полученный шаблон выглядит так:
Невозможно напрямую стилизовать вставленные элементы, хотя вы можете настроить таргетинг на слоты и каскадировать свойства CSS:
Слоты немного громоздки, но содержимое отображается до запуска JavaScript вашего компонента. Их можно использовать для элементарного прогрессивного улучшения.
Декларативный теневой DOM
Теневая модель DOM не может быть построена до тех пор, пока не будет запущен ваш JavaScript. Declarative Shadow DOM — это новая экспериментальная функция, которая обнаруживает и отображает шаблон компонента на этапе синтаксического анализа HTML. Теневая модель DOM может быть объявлена на стороне сервера, и это помогает избежать сдвигов макета и мигания нестилизованного содержимого.
Компонент определяется с внутренним, который имеет shadowrootнабор атрибутов, чтобы openили closedв случае необходимости:
После этого Shadow DOM будет готов к запуску класса компонента; он может обновлять содержимое по мере необходимости.
Эта функция появится в браузерах на базе Chrome, но еще не готова, и нет гарантии, что она будет поддерживаться в Firefox или Safari (хотя она легко полифицируется). Для получения дополнительной информации см. Декларативную теневую DOM.
Включающие входы
И поле, используемое в тени DOM являются не связанно с содержащей формой. Некоторые авторы веб-компонентов добавляют скрытые поля к DOM внешней страницы или используют интерфейс FormData для обновления значений, но это нарушает инкапсуляцию.
Новый интерфейс ElementInternals позволяет веб-компонентам ассоциировать себя с формами. Он реализован в Chrome, но для других браузеров требуется полифил.
Допустим, вы создали компонент, который добавляет следующее поле в Shadow DOM:
Класс веб-компонента должен определять статическое formAssociatedсвойство как trueи при необходимости может предоставлять formAssociatedCallback()метод, который вызывается, когда форма связана с элементом управления:
Конструктор должен работать, this.attachInternals()чтобы компонент мог взаимодействовать с формой и другим кодом JavaScript. Метод ElementInternal setFormValue()устанавливает значение элемента (инициализируется пустой строкой):
connectedCallback()Метод делает Shadow DOM, как и раньше, но он также должен смотреть на поле для изменения и обновления значения:
ElementInternal также может предоставлять информацию о форме, метках и параметрах API проверки ограничений.
Будущее за веб-компонентами?
Если вы работаете с фреймворком JavaScript, веб-компоненты могут показаться низкоуровневыми и несколько громоздкими. Также потребовалось десятилетие, чтобы прийти к соглашению и достичь разумного уровня кросс-браузерной совместимости. Неудивительно, что разработчики не спешили их использовать.
Веб-компоненты не идеальны, но они будут развиваться, и их можно будет использовать уже сегодня. Они легкие, быстрые и предлагают функциональность, невозможную только в JavaScript. Более того, их можно использовать в любом фреймворке JavaScript.
Локализация на веб компонентах и с абсолютной кастомизацией. Работает на любом сайте
Я всегда мечтал о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал иметь максимально гибкое решение для абсолютной кастомизации под себя. Два года назад мы начали работать над воплощением этой смелой мечты в реальность. Первой такой функциональностью стала именно Uni Локализация.
К сожалению, нельзя было просто так взять и сделать. Большую часть времени из этих двух лет пришлось потратить на создание правильной инфраструктуры с нуля и ее документирование. Но теперь разработка самих виджетов у нас занимает считанные часы.
Как нам удалось этого добиться?
Во первых, абсолютной портативности можно было добиться только лишь с HTML, так как он работает абсолютно в любом web проекте. Даже в JavaScript фреймворках это решается несколькими строчками в конфигурации или вовсе ничего не нужно ничего делать. С JavaScript библиотекой у нас бы так не получилось!
А что же с локализацией?
Сама Uni Локализация состоит из двух основных частей:
Next Gen виджет и компонента-переводчик имеют по 3 режима:
А как же это выглядит?
В упакованном виде (custom element / web component), виджет может выглядеть как выпадающее меню или как линейный список:
Может быть и без названия языка:
Может быть с круглыми флагами:
Может быть и без флагов:
Может отображаться различными кнопками:
Может быть с параметром в URL адресе, а может сохраняться только в памяти:
Может иметь свой, кастомный URL параметр:
Может сохраняться в объект window или sessionStorage или localStorage. Установите параметр type=”local” для того, чтобы открывать в новой вкладке с выбранным языком.
Может передавать переводы в Shadow Dom и iFrame
Даже может работать параллельно еще с несколькими виджетами локализации на одной странице и не конфликтовать с ними. Для этого необходимо указать другие пути в свойствах …-path (см. API).
Для корректной работы виджета, необходим список языков в таком JSON формате:
Свойство lang необходимо для только роутинга. Если свойство flag не указано, тогда флаг не будет отображаться. Список доступных на данный момент флагов указан здесь.
В разобранном виде (Unpacked), JSON формат может быть любой, как и сама реализация виджета. Вы вольны кастомизировать его как душе угодно.
Как же осуществляется сам перевод?
Uni Translate получает объект с ключами и значениями для них и проверяет текст в дочерних HTML элементах на соответствие ключам. Замена ключа на значение происходит при соблюдении нескольких условий:
Ключевой текст находится в своем, отдельном HTML теге;
Ключевой текст находится между (( и )) (биндинг);
Сами знаки биндинга можно переопределить и изначально они были <<и >>, но затем были изменены по умолчанию на (( и )) для более простой интеграции с большой тройкой JS фреймворков.
Ещё биндинги можно использовать прямо в файле локализации. Это удобно для переиспользования переводов и исключения дублирования.
Замена на новое значение производится даже в HTML атрибутах, тем самым можно произвести даже локализацию ссылок или плейсхолдеров. Мы сами этим пользуемся, очень полезная фича.
Uni Локализация является Open Source проектом с MIT лицензией. A если, к примеру, вам необходимы дополнительные флаги стран, тогда вы можете добавить их самостоятельно в репозиторий @uiwebkit/flags.
Интеграции:
Планы
На подходе ещё несколько виджетов. Следующим будет виджет вкладок (Uni Tabs), а затем пойдут более крупные виджеты. Планируем выпускать новый Next Gen виджет каждый месяц или даже чаще. Ну а если если вы хотите иметь свой собственный виджет, который работает в любом web проекте и с любой технологией, тогда вы можете создать его самостоятельно с помощью UiWebKit пакетов, либо заказать его у нас.
Буду рад конструктивным комментариям и вопросам, с удовольствием на них отвечу.
Всем спасибо! Ставьте звездочки на Github, мне будет очень приятно. Подписывайтесь на наш Twitter, Facebook и Instagram, чтобы быть в курсе всех новинок. Пользуйтесь в удовольствие, берегите себя, оставайтесь здоровым и продуктивным!
Web Components — будущее Web
Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.
Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Web Components — это черновик набора стандартов. Его предложили и активно продвигают ребята из Google, но инициативу уже поддержали в Mozilla. И Microsoft. Шучу, Microsoft вообще не при делах. Мнения в комьюнити противоречивые (судя по комментариям, статьям и т.д.).
Основная идея в том, чтобы позволить программистам создавать “виджеты”. Фрагменты приложения, которые изолированы от документа, в который они встраиваются. Использовать виджет возможно как с помощью HTML, так и с помощью JS API.
Я пару недель игрался с новыми API и уверен, что в каком-то виде, рано или поздно эти возможности будут в браузерах. Хотя их реализация в Chrome Canary иногда ставила меня в тупик (меня, и сам Chrome Canary), Web Components кажется тем инструментом, которого мне не хватало.
Стандарт Web Components состоит из следующих частей:
Фрагменты HTML, которые программист собирается использовать в будущем.
Содержимое тегов парсится браузером, но не вызывает выполнение скриптов и загрузку дополнительных ресурсов (изображений, аудио…) пока мы не вставим его в документ.
Инструмент инкапсуляции HTML.
Импорт фрагментов разметки из других файлов.
В Web Components больше частей и маленьких деталей. Некоторые я ещё буду упоминать, до каких-то пока не добрался.
Templates
Концепция шаблонов проста. Хотя под этим словом в стандарте подразумевается не то, к чему мы привыкли.
В современных web-фреймворках шаблоны — это строки или фрагменты DOM, в которые мы подставляем данные перед тем как показать пользователю.
В web components шаблоны — это фрагменты DOM. Браузер парсит их содержимое, но не выполняет до тех пор, пока мы не вставим его в документ. То есть браузер не будет загружать картинки, аудио и видео, не будет выполнять скрипты.
К примеру, такой фрагмент разметки в документе не вызовет загрузку изображения.
Пример работы шаблонов можно посмотреть здесь.
Все примеры в статье следует смотреть в Chrome Canary со включенными флагами:
Для Чего?
На данный момент существует три способа работы с шаблонами:
Минусы такого подхода в том, что браузер попытается “выполнить” код шаблона. То есть загрузить картинки, выполнить код скриптов и т.д.
Минус в том, что приходится работать со строками. Это создаёт угрозу XSS, нужно уделять дополнительное внимание экранированию.
У нет этих недостатков. Мы работаем с DOM, не со строками. Когда выполнять код, также решать нам.
Shadow DOM
Инкапсуляция. Этого в работе с разметкой мне не хватало больше всего. Что такое Shadow DOM и как он работает проще понять на примере.
Когда мы используем html5 элемент код выглядит примерно так:
Но на странице это выглядит так:
Мы видим множество контролов, прогресбар, индикатор длины аудио. Откуда эти элементы и как до них добраться? Ответ — они находятся в Shadow Tree элемента. Мы можем даже увидеть их в DevTools, если захотим.
Чтобы Chrome в DevTools отображал содержимое Shadow DOM, в настройках DevTools, вкладка General, раздел Elements ставим галочку Show Shadow DOM.
Содержимое Shadow DOM тега в DevTools:
Теория Shadow DOM
Shadow Tree — это поддерево, которое прикреплено к элементу в документе. Элемент в этом случае называется shadow host, на его месте браузер показывает содержимое shadow tree, игнорируя содержимое самого элемента.
Фишка shadow dom в том, что стили, определённые в нём с помощью
Зелёный фон в примере получит только `
` внутри shadow tree. То
есть стили «не вытекут» в основной документ.
Наследуемые стили
Авторские стили
Селекторы ^ и ^^
Инкапсуляция это здорово, но если мы всё таки хотим добраться до shadow tree и изменить его представление из стилей документа, нам понадобится молоток. И кувалда.
Селектор div ^ p аналогичен div p с тем исключением, что он пересекает одну теневую границу (Shadow Boundary).
Селектор div ^^ p аналогичен предыдущему, но пересекает ЛЮБОЕ количество теневых границ.
Зачем нужен Shadow DOM?
Shadow DOM позволяет изменять внутреннее представление HTML элементов, оставляя внешнее представление неизменным.
Custom Elements
API кастомного элемента
Прототип должен наследовать HTMLElement или его наследника,
например HTMLButtonElement :
Зачем нужны Custom Elements?
или
- хорошо подходят для низкоуровневой вёрстки, тогда как Custom Elements позволят писать модульный, удобочитаемый код на высоком уровне.
Shadow DOM и Custom Elements дают возможность создавать независимые от контекста виджеты, с удобным API и инкапсулированным внутренним представлением.
HTML Imports
Импорты — простое API, которому давно место в браузерах. Они дают возможность вставлять в документ фрагменты разметки из других файлов.
Object.observe()
Этот метод доступен в Chrome, если включить флаг Experimental Web Platform features.
TODO widget
Согласно древней традиции, вооружившись этими знаниями, я решил сделать простой TODO-виджет. В нём используются части Web Components, о которых я рассказывал в статье.
Добавление виджета на страницу сводится к одному импорту и одному тегу в теле документа.
Заключение
На мой взгляд, Web Components — это следующий шаг. Разработчики смогут создавать интерактивные виджеты. Их легко поддерживать, переиспользовать, интегрировать.
Код страницы не будет выглядеть как набор “блоков”, “параграфов” и “списков”. Мы сможем использовать элементы вроде “меню”, “новостная лента”, “чат”.
Конечно, стандарт сыроват. К примеру, импорты работают не так хорошо, как шаблоны. Их использование рушило Chrome время от времени. Но объём нововведений поражает. Даже часть этих возможностей способна облегчить жизнь web-разработчикам. А некоторые заметно ускорят работу существующих фреймворков.
Некоторые части Web Components можно использовать уже сейчас с помощью полифилов. Polymer Project — это полноценный фреймворк уровня приложения, который использует Web Components.
Ссылки
Eric Bidelman, серия статей и видео о Web Components: