Веб компоненты без Shadow DOM
За последнее время я заметил целый ряд статей с разного рода критикой веб-компонентов. Порой, эта критика весьма жесткая и даже попахивает хейтерством. На мой взгляд, основной проблемой тут является отсутствие наработанной практики работы с этой группой стандартов у сообщества разработчиков. Многие привычные модели не всегда органично вписываются в проекты с участием Custom Elements и Shadow DOM, на многие вещи приходится смотреть под новым углом и не всем это нравится. Я вполне успешно работаю с веб-компонентами уже несколько лет и даже разрабатываю собственную библиотеку на их основе, поэтому считаю такую ситуацию не очень справедливой. Постараюсь, хотя бы частично, это исправить, по мере моих скромных сил. Я решил сделать серию компактных публикаций, в каждой из которых я планирую затронуть один из частых аспектов критики, а так-же продемонстрировать ряд технических приемов, которые могут оказаться интересными тем, кто еще не определился с тем, на какой стороне баррикад ему быть. Сегодня я хотел бы рассказать о том, как создавать компоненты без Shadow DOM.
Зачем?
Основная мысль, которую я хочу донести на этот раз, это то, что веб-компоненты и Shadow DOM — это не одно и то-же. При использовании Shadow DOM, вы получаете два основных преимущества:
Если вы уже знакомы со стандартом Custom Elements, вы сразу заметите в чем дело: вместо вызова метода attachShadow в конструкторе компонента, мы создали DocumentFragment в который клонировали заранее подготовленный шаблон. На данном этапе, компонент не рендерится браузером и его можно относительно безопасно модифицировать, например, привязать/вставить данные.
Поскольку, избавившись от ShadowRoot, мы лишились и изоляции стилей, мы добавили стили в наш шаблон с помощью атрибута. В данном случае, они имеют приоритет, это частично решает проблему и может использоваться в важных местах. Для всех остальных случаев, доступна классическая стилизация через общую таблицу стилей, а кастомные теги выступают в роли удобных селекторов.
display: contents
Веб-компоненты являются полноправными узлами вашего DOM. Это означает, помимо того, что вам доступны все стандартные методы DOM-элементов, и то, что ваш компонент — это всегда некий контейнер. То есть, если вы захотите, с помощью веб-компонента, добавить в DOM произвольную структуру элементов, все они окажутся потомками вашего компонента, что не всегда удобно. В таких случаях, можно использовать новое CSS-правило — display: contents. Поддержка браузерами: caniuse.com/#feat=css-display-contents
По умолчанию же, все компоненты имеют свойство display: inline.
Немного похулиганим
А что если мы вообще не хотим никаких лишних контейнеров и кастомных тегов? Даешь чистый HTML!
В результате получаем это:
Все события и привязки продолжают работать и контролируются нашим компонентом, который теперь существует только в памяти. В данном случае, вам придется дополнительно позаботится о отписках и прочей очистке от мусора в момент, когда вы захотите удалить компонент полностью.
CSS Компоненты
Согласно стандарту, пользовательские теги должны именоваться с обязательным добавлением символа «-«. Если вы используете свой тег в разметке, но, при этом, вообще не создаете никакого компонента в JS и не добавляете его конструктор в реестр компонентов — браузер считает ваш тег «неизвестным элементом» (HTMLUnknownElement). По умолчанию, такие элементы аналогичны по поведению тегу «span». Этим можно воспользоваться, если вам нужно создать простой dumb-компонент с незатейливой структурой, для которой достаточно CSS правил ::before, ::after и выражения attr(). Пример:
Spider-Man: Web of Shadows
Как ни крути, воздушные бои вышли очень зрелищными.
На сегодняшний день созданы все условия для выхода отличной игры про Человека-паука. Давно практикуемый героем паркур — один из главных трендов сезона (Assassin`s Creed, Mirror`s Edge, Prince of Persia), до премьеры четвертого фильма ориентировочно три года — мы решили, звезды благоволят Пауку. Надо признать, поторопились.
Spider-Man: Web of Shadows на первый взгляд может показаться игрой по фильму, выпущенной сильно заранее. Основа геймплея — полеты по каменным джунглям, которые по замыслу авторов символизируют sandbox (если только правомерно называть этим словом возможность свободно передвигаться по городу). Разработчики как бы говорят нам: «Это же игра про Человека-паука. Летайте себе на паутине, вниз спускаться не нужно» Потому как на земле творится страшное. Группы картонных человечков вяло мнут асфальт, неадекватно реагируя на ваше присутствие. Машины также «удались» — по большому счету, их ровно два вида: «серая» и такси, причем такси в разы больше.
Shaba Games обещали выстроить свою игру на двух стилях прохождения — за злого или доброго Паука. Действительно, костюмы можно менять в любой момент, только разница между ними несущественна. В обеих ипостасях герой отлично летает на паутине и остервенело дерется. Поэтому с точки зрения геймплея переодеваться смысла нет, а вот для разнообразия и увеселения — сколько угодно.
Порой кажется, игра сама не понимает, где у нее верх, а где низ.
Хорошо еще, что смотрится все это очень зрелищно, даже в сотый раз повторенный прием не надоедает. Кстати, благодаря ему Человек-паук научился держаться в воздухе. Если вас сбивают с вертикальной поверхности, всегда будет возможность зацепиться за летающего или ползающего по стене врага, чтобы вернуться в битву.
Как только герой встает на стену, камера меняет угол обзора — стена становится полом. Человек-паук больше не ползает — он может бегать по ней или даже ездить на врагах, как на скейте. В итоге можно запросто позабыть, где верх, а где низ: камера крутится словно волчок, да и герой не устает удивлять — делает сальто, садится в воздухе на шпагат, вытягивает руку и складывает пальцы в «козу». Смех смехом, а Spider-Man: Web of Shadows — это, кажется, первая игра, которая дает возможность почувствовать себя настоящим Человеком-пауком, с его невероятной скоростью, гибкостью и координацией.
Для фанатов припасен бонус в виде узнаваемых и очень оригинально оформленных боссов. Так, крылья Стервятника состоят из удерживаемых гравитационным полем мечей, которые он может распускать, метать в героя, а потом собирать обратно. Самый замечательный момент — драка с Росомахой. Он, уверенный, что Паука подменил клон-симбионт, устроил ему проверку — отнюдь не дружеские побои, перемежающиеся вопросами из истории Спайдермена. Отвечать на них должен сам игрок — вот уж где точно выяснится, кто на самом деле фанат серии!
В Spider-Man: Web of Shadows есть то, чего мы ждем от игры про Человека-паука: забеги по вертикальным поверхностям, достойная акробатика, прыжки между зданиями и харизматичные боссы. Нет, правда, того, за счет чего игра могла бы выйти за рамки «продукта-по-лицензии»: нет по-настоящему оригинальных геймплейных находок, нет разнообразия, нет внятно смоделированного города. Действие в этой игре концентрируется вокруг Паука, его врагов и способов их уничтожения. За пределами этой схемы нет ничего интересного.
Классный сюжет — нет
Оправданность ожиданий: 80%
Интерфейс и управление: 6
Дождались? Очередная игра про Человека-паука не сумела перерасти собственный сеттинг: авторы бросили все силы на боевую систему и акробатику, совершенно забыв про все остальное.
Как работает JS: технология Shadow DOM и веб-компоненты
Сегодня, в переводе 17 части материалов, посвящённых особенностям всего, что так или иначе связано с JavaScript, речь пойдёт о веб-компонентах и о различных стандартах, которые направлены на работу с ними. Особое внимание здесь будет уделено технологии Shadow DOM.
Обзор
Веб-компоненты — это семейство API, предназначенных для описания новых элементов DOM, подходящих для повторного использования. Функционал таких элементов отделён от остального кода, их можно применять в веб-приложениях собственной разработки.
Существует четыре технологии, относящиеся к веб-компонентам:
Технология Shadow DOM
Тут предполагается, что вы уже знакомы с концепцией DOM и с соответствующими API. Если это не так — можете почитать этот материал.
Shadow DOM — это, в целом, то же самое, что и обычный DOM, но с двумя отличиями:
Это изолированное поддерево называют shadow tree (теневое дерево). Элемент, к которому присоединено такое дерево, называется shadow host (теневой хост-элемент). Всё, что добавляется в теневое поддерево DOM, оказывается локальным для элемента, к которому оно присоединено, в том числе — стили, описываемые с помощью тегов 
Launch
Шаблоны
Если включить такую конструкцию в состав HTML-разметки страницы, содержимое описываемого ей тега
не появится на экране до тех пор, пока не будет явным образом присоединено к DOM документа. Например, это может выглядеть так:
Существуют и другие средства, позволяющие достичь того же эффекта, но, как уже было сказано, шаблоны — очень удобный стандартный инструмент, пользующийся хорошей поддержкой браузеров.
Поддержка HTML-шаблонов современными браузерами
Шаблоны полезны и сами по себе, но в полной мере их возможности раскрываются при использовании с пользовательскими элементами. Пользовательские элементы — это тема для отдельного материала, а сейчас, для понимания происходящего, достаточно учитывать то, что API браузеров customElement позволяет программисту описывать собственные HTML-теги и задавать то, как элементы, создаваемые с помощью этих тегов, будут выглядеть на экране.
Определим веб-компонент, который использует наш шаблон в качестве содержимого для своего теневого DOM. Назовём этот новый элемент :
Самое важное, на что тут надо обратить внимание — это то, что мы присоединили клон содержимого шаблона, сделанный с помощью метода Node.cloneNode(), к теневому корню.
Так как мы присоединяем содержимое шаблона к теневому DOM, мы можем включить в шаблон некую информацию о стилизации, в элементе
Теперь описанный нами пользовательский элемент можно использовать на обычных веб-страницах следующим образом:
Слоты
Слоты можно воспринимать как местозаполнители, которые позволяют включать в шаблон собственный HTML-код. Это позволяет создавать универсальные HTML-шаблоны, а затем делать их настраиваемыми, добавляя в них слоты.
Взглянем на то, как будет выглядеть вышеописанный шаблон с использованием тега :
Как и ранее, тут может быть всё, что угодно. Например:
Элементы, которые можно помещать в слоты, называются Slotable-элементами.
После обработки вышеописанной разметки браузером будет создано следующее дерево Flattened DOM:
Стилизация
Компоненты, которые используют технологию Shadow DOM, можно стилизовать на общих основаниях, они могут определять собственные стили, или предоставлять хуки в форме пользовательских свойств CSS, которые позволяют пользователям компонентов переопределять стили, заданные по умолчанию.
▍Стили, описываемые в компонентах
Изоляция CSS — это одно из самых замечательных свойств технологии Shadow DOM. А именно, речь идёт о следующем:
▍Псевдокласс :host
Псевдокласс :host позволяет обращаться к элементу, содержащему теневое дерево DOM и стилизовать этот элемент:
Пользуясь псевдоклассом :host следует помнить о том, что правила родительской страницы имеют более высокий приоритет, чем те, которые заданы в элементе с использованием этого псевдокласса. Это позволяет пользователям переопределять стили хост-компонента, заданные в нём, извне. Кроме того, псевдокласс :host работает лишь в контексте теневого корневого элемента, за пределами теневого дерева DOM пользоваться им нельзя.
▍Темы и элементы с псевдоклассом :host-context( )
Обычный вариант использования этой возможности заключается в стилизации элементов с помощью тем. Например, часто темы применяют, назначая соответствующий класс тегам или :
Конструкция :host-context() может быть полезной для применения тем, но для этой цели лучше использовать хуки с применением пользовательских свойств CSS.
▍Стилизация хост-элемента компонента извне
Хост-элемент компонента можно стилизовать извне, используя имя его тега в качестве селектора:
Внешние стили имеют более высокий приоритет, чем стили, определённые в теневом DOM.
Предположим, пользователь создал следующий селектор:
Он переопределит правило, заданное в самом компоненте:
Используя этот подход можно стилизовать лишь сам компонент. Как стилизовать внутренние структуры компонента? Для этой цели используются пользовательские свойства CSS.
▍Создание хуков стилей с использованием пользовательских свойств CSS
Пользователи могут настраивать стили внутренних структур компонентов если автор компонента предоставляет им хуки стилей, применяя пользовательские свойства CSS.
Вот что находится внутри теневого дерева DOM:
В роли автора компонента вы ответственны за то, чтобы сообщить его пользователям о том, какие именно пользовательские CSS-свойства они могут использовать. Считайте это частью открытого интерфейса вашего компонента.
API JavaScript для работы со слотами
API Shadow DOM предоставляет возможности работы со слотами.
▍Событие slotchange
Событие slotchange вызывается при изменении узлов, помещённых в слот. Например, если пользователь добавляет дочерние узлы в Light DOM или удаляет их из него:
▍Метод assignedNodes()
Метод assignedNodes() может оказаться полезным в том случае, если нужно узнать о том, какие элементы связаны со слотом. Вызов метода slot.assignedNodes() позволяет узнать о том, какие именно элементы выводятся средствами слота. Использование опции
В первом случае мы добавляем в слот собственное содержимое:
Во втором случае мы не заполняем слот собственным содержимым:
Если, однако, передать этому методу параметр
Модель событий
Поговорим о том, что происходит при всплытии события, возникшего в теневом дереве DOM. Цель события задаётся с учётом инкапсуляции, поддерживаемой технологией Shadow DOM. Когда событие перенаправляется, это выглядит так, как будто оно исходит от самого компонента, а не от его внутреннего элемента, который находится в теневом дереве DOM и является частью этого компонента.
Вот список событий, которые передаются из теневого дерева DOM (некоторым событиям такое поведение не свойственно):
Пользовательские события
Поддержка Shadow DOM браузерами
Для того чтобы узнать, поддерживает ли браузер технологию Shadow DOM, можно проверить наличие attachShadow :
Вот сведения о поддержке этой технологии различными браузерами.
Поддержка технологии Shadow DOM в браузерах
Итоги
Практика показывает, что всё больше современных веб-приложений используют Shadow DOM, что позволяет говорить о том, что эту технологию, вероятно, ждёт дальнейшее развитие и распространение.
Уважаемые читатели! Пользуетесь ли вы веб-компонентами, построенными на основе технологии Shadow DOM?
Spider-Man: Web of Shadows
Излюбленная поза Человека-Паука.
Враги в игре разлетаются в самые разные стороны.
Ведь злодеи не умнеют и не становятся сильнее. В то время как вы набираете очки опыта, становитесь быстрее и мощнее, разучиваете новые приемы. Шансов у них не остается уже в самом начале? когда вы начинаете кидать в них автомобили. Чего говорить о том, что происходит где-то в середине игры. Кроме того, кругом разбросаны специальные значки, собирая которые Человек-Паук повышает свои характеристики.
Ваш главный неприятель.
Впрочем, несмотря на все недостатки, посвятить несколько дней Web of Shadows можно. Не исключено, что поклонникам Spider-Man игра даже понравится. К тому же ее однообразие не столь непростительный недостаток, учитывая то, что пройти игру можно очень быстро. В общем, проходной проект. Ничего особенного. Но не полный провал.
Плюсы: красочные сражения; разрушение всего и вся; любимые герои.
Минусы: некрасивая графика; однообразие.
Spider Man Web of Shadows
Spider Man Web of Shadows начинается с возвращения старого хорошо известного злодея Венома. Тот решил повысить популяцию симбиотов на Земле, заражая мирных жителей этим инопланетным вирусом, и таким образом распространить эту заразу на всю планету, дабы захватить мир. Естественно, подобное положение дел никак не нравится дружелюбному соседу, то есть Человеку-Пауку, который решает разрушить планы негодяя и остановить его.
Игра, разработанная студиями Treyarch и Shaba Games – далеко неоднозначный медиапродукт, в котором есть как минусы, так и плюсы. К негативным моментам можно отнести некоторые нюансы игрового процесса, в частности открытый мир в виде Нью-Йорка, полетать по улицам которого нельзя, не выполняя сюжетные задания. То есть, свободного режима в игре нет, поэтому наслаждаться свободным полетом можно только во время сюжетного прохождения.
Вторая проблема игры заключается в малом разнообразии всего, начиная игровыми ситуациями, заканчивая заданиями. Миссии повторяются и в большинстве своем всегда сводятся к следующему: защити одного, спаси другого, сопроводи третьего, защити машины с выжившими, и тому подобным. Третий нюанс из ряда негативных кроется в графике. Но это можно простить игре, так как она была выпущена достаточно давно, и на момент своего релиза смотрелась весьма неплохо.
С точки зрения игровой механики, Spider Man: Web of Shadows довольно хороша. Главгерой способен атаковать врагов разными ударами, поэтому игроку придется запомнить свыше десятка различных комбинаций, позволяющих сражаться как в воздухе, так и на земле. Противников в игре тоже достаточно много, и все они отличаются друг от друга как внешне, так и по атакующим способностям.
