shadow web что это

Веб компоненты без 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 довольно хороша. Главгерой способен атаковать врагов разными ударами, поэтому игроку придется запомнить свыше десятка различных комбинаций, позволяющих сражаться как в воздухе, так и на земле. Противников в игре тоже достаточно много, и все они отличаются друг от друга как внешне, так и по атакующим способностям.

Источник