show user agent shadow dom что это
Shadow DOM
Теневой DOM («Shadow DOM») используется для инкапсуляции. Благодаря ему в компоненте есть собственное «теневое» DOM-дерево, к которому нельзя просто так обратиться из главного документа, у него могут быть изолированные CSS-правила и т.д.
Встроенный теневой DOM
Задумывались ли вы о том, как устроены и стилизованы сложные браузерные элементы управления?
Браузер рисует их своими силами и по своему усмотрению. Их DOM-структура обычно нам не видна, но в инструментах разработчика можно её посмотреть. К примеру, в Chrome для этого нужно активировать пункт «Show user agent shadow DOM».
После этого выглядит так:
То, что находится под #shadow-root – и называется «shadow DOM» (теневой DOM).
Мы не можем получить доступ к теневому DOM встроенных элементов с помощью обычных JavaScript-вызовов или с помощью селекторов. Это не просто обычные потомки, это мощное средство инкапсуляции.
Ещё раз заметим, что pseudo – нестандартный атрибут. Если говорить хронологически, то сначала браузеры начали экспериментировать с инкапсуляцией внутренних DOM-структур для элементов, а уже потом, через некоторое время, появился стандарт Shadow DOM, который позволяет делать то же самое нам, разработчикам.
Далее мы воспользуемся современным стандартом Shadow DOM, описанным в спецификации DOM spec и других спецификациях.
Теневое дерево
Каждый DOM-элемент может иметь 2 типа поддеревьев DOM:
Если у элемента имеются оба поддерева, браузер отрисовывает только теневое дерево. Также мы всё же можем задать «композицию» теневого и обычного деревьев. Позже в главе Слоты теневого DOM, композиция мы рассмотрим детали.
Теневое дерево можно использовать в пользовательских элементах (Custom Elements), чтобы спрятать внутренности компонента и применить к ним локальные стили.
Например, этот элемент прячет свой внутренний DOM в теневом дереве:
А вот как получившийся DOM выглядит в инструментах разработчика в Chrome, весь контент внутри «#shadow-root»:
Итак, вызов elem.attachShadow(
Есть два ограничения:
Свойство mode задаёт уровень инкапсуляции. У него может быть только два значения:
Элемент с корнем теневого дерева называется – «хозяин» (host) теневого дерева, и он доступен в качестве свойства host у shadow root:
Инкапсуляция
Теневой DOM отделён от главного документа:
Ссылки
Итого
Теневой DOM – это способ создать свой, изолированный, DOM для компонента.
Элементы теневого DOM:
Теневой DOM, если имеется, отрисовывается браузером вместо обычных потомков (light DOM). В главе Слоты теневого DOM, композиция мы разберём, как делать их композицию.
15 советов и хитростей инструментов разработчика Chrome, которые вы обязаны знать
1. Быстрая смена файлов
Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.
2. Поиск в исходном коде
Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.
3. Переход к строке
После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.
Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести «:» и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя «:» как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).
4. Выборка DOM элементов с помощью консоли
Узнать больше функций консоли можно тут.
5. Использование нескольких кареток и выделений
При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.
6. Preserve Log
При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.
(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)
7. Прихорашивание минимизированных исходников
Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.
(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)
8. Режим устройства
Инструменты разработчика включают в себя мощный режим для разработки страниц оптимизированных под мобильные устройства. В этом видео от Google демонстрируется большинство его дополнительных функций, таких как изменение разрешения экрана, эмуляция прикосновения к сенсорному экрану и эмуляция низкокачественного сетевого соединения.
9. Эмуляция датчиков устройства
10. Выбор цвета
При выборе цвета в редакторе стилей вы можете кликнуть по образцу цвета и появится окно выбора цвета. Пока это окно открыто ваш указатель мыши превращается в увеличительную лупу для выбора цвета, на странице, с точностью до пикселя.
11. Принудительное состояние элемента
Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как :hover и :focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.
12. Отображение shadow DOM
13. Выбрать следующее вхождение
Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.
14. Изменение формата цвета
С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).
15. Редактирование локальных файлов в рабочей области
Рабочие области — мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.
Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.
UPD. Примечание переводчика:
Добавленная папка будет доступна со всех вкладок. По этому если в вашем проекте больше одного HTML файла, то достаточно будет открыть его в соседней вкладке браузера.
Вы можете узнать больше о рабочих пространствах тут.
Как работает 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?
Трюки в Chrome DevTools
Перейдем к самому интересному — подборке самых полезных и интересных, на наш взгляд, трюков и скрытых возможностей Chrome DevTools.
Верстка
1. Инспектируем анимацию
Меню анимаций в DevTools позволит вам замедлить все анимации на странице или подвигать “руками” конкретную анимацию.
2. Экспериментируем с цветами
Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design.
3. Редактируем любой текст на странице
Допустим у вас есть текстовый блок на страницы и вы хотите узнать, как он будет выглядеть, если текст в нем изменится. Переключите документ в режим дизайна! Наберите в консоле document.designMode = ‘on’, аналогично работает document.body.contentEditable = true. После этого вы сможете редактировать все элементы имеющие текстовый контент.
4. Просмотр отрендеренных шрифтов
Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.
5. Принудительные псевдоклассы для элементов
DevTools имеет функцию, которая имитирует применение псевдоклассов CSS, например такие как :hover и :focus на элементах, что упрощает их стилизацию. Она доступна из редактора CSS.
6. Изменение формата цвета
Используйте Shift + Клик на предварительном просмотре цвета, чтобы изменить формат: rgb, hsl и hex.
7. Редактор кривых безье для анимации
Вы можете легко изменить временные функции используя DevTools (например, значение свойства для animation-timing-function CSS свойств).
Возможности консоли
1. Вывести HTML элемент в представлении JS объекта
При чтении HTML, браузер генерирует DOM-модель. Если необходимо вывести элемент именно в виде JS объекта в консоль, проще всего для этого воспользоваться методом console.dir().
2. Группировка сообщений
Иногда бывает полезно сгруппировать логи для упрощения работы с ними и меньшего засорения консоли. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().
3.1. Вывод значений переменных в виде таблиц
Иногда намного удобнее и нагляднее работать с массивами или объектами в виде таблицы, а не в виде стандартного иерархического представления. Для вывода данных в виде таблице существует метод console.table().
3.2 keys(object) и values(object)
Keys() — возвращает массив имён свойств объекта.
Values() — возвращает массив, содержащий значения всех свойств указанного объекта.
4. Логирование времени выполнения кода
Представьте, что у вас есть две функции которые делают одно и тоже но их реализация различна. Как понять какая из них работает быстрее? Можно воспользоваться методами console.time() и console.timeEnd().
5. Профилирование
Помимо замера времени можно профилировать Ваш код и вывести стек профилирования, который подробно показывает, где и сколько времени потратил браузер.
Возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().
7. clear(), copy(object) и inspect(object/function)
Clear() — очистка всех записей в консоли.
Copy() — копирование в буфер обмена строкового представления указанного объекта.
Inspect() — открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.
Прочее
1. Продвинутая кнопка перезагрузки
(Работает только при открытом DevTools и только в браузере Google Chrome!)
По долгому нажатию на кнопку «Обновить страницу» (либо по правому клику) мы открываем специальное меню, которое предоставляет нам выбор:
2. Форматирование минифицированых исходников
Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.
3. Отображение shadow DOM
4. Фильтрация и поиск
При работе с DOM, CSS, списком запросов на вкладке Network и т.д. зачастую мы видим перед собой большой список элементов, селекторов, свойств и так далее, в котором бывает сложно быстро найти интересующее нас значение. В таких случаях не стоит забывать про использование фильтрации и поиска которое присутствует на всех вкладках. Благодаря фильтрации мы будем отсеивать все варианты кроме подходящих под условия, а поиск позволит Вам быстро найти то что нужно, если Вы знаете ключевые «слова» для поиска. Как правило поле поиска скрыто и вызывается комбинацией Ctrl + F.
5. Come to the Dark Side
Просто потому что темная сторона круче (:
А если серьезно, темная тема убережет ваши глаза от лишнего напряжения, если основной цвет разрабатываемой или отлаживаемой страницы темный, как в моем случае. Включить можно вначале страницы настроек DevTools.
Русские Блоги
Используйте Shadow DOM в React
1. Что такое Shadow DOM
Shadow DOM позволяет вставлять «поддерево DOM» при рендеринге документа, и это поддерево не находится в основном дереве DOM. В то же время оно предоставляет возможность инкапсулировать элементы DOM и CSS в поддереве. Shadow DOM хранит DOM поддерева отдельно от DOM основного документа. CSS в дереве sub-DOM не влияет на содержимое основного дерева DOM, как показано на следующем рисунке:
Есть несколько технических концепций, связанных с Shadow DOM, которые необходимо понять:
Shadowhost : Обычный узел DOM, Shadow DOM будет прикреплен к этому узлу.
Shadowtree : Дерево DOM внутри Shadow DOM.
Shadowboundary : Конец Shadow DOM также является началом обычного DOM.
Shadowroot : Корневой узел дерева теней.
2. Какая польза от Shadwo DOM
2.1. Нативные компоненты, встроенные в браузер
2.2. Web Components
Веб-компоненты позволяют разработчикам создавать настраиваемые элементы многократного использования. Их можно использовать вместе для создания настраиваемых элементов, инкапсулирующих функции, и их можно повторно использовать где угодно, например, собственные элементы браузера, не беспокоясь о конфликтах между стилями и DOM. В основном он состоит из трех основных технологий:
CustomElements (Пользовательские элементы): набор API-интерфейсов JavaScript, которые позволяют вам определять пользовательские элементы и их поведение, а затем вы можете использовать их по мере необходимости в своем пользовательском интерфейсе.
HTMLTemplates (HTML-шаблон): template с участием slot Элемент позволяет писать шаблоны разметки, которые не отображаются на отображаемой странице. Затем их можно многократно использовать в качестве основы для пользовательских структур элементов.
ShadowDOM (Shadow DOM): набор API-интерфейсов JavaScript используется для присоединения «теневого дерева DOM» к элементу, изоляции его от дерева DOM основного документа и управления связанными с ним функциями. Таким образом, вы можете сохранить конфиденциальность элементов и не беспокоиться о конфликте «стиля» с другими частями документа.
ВWeb ComponentsОдна из важных функций «Инкапсуляции» может скрыть «структуру HTML-тега, стиль CSS, поведение» и отделить ее от других кодов на странице, чтобы разные функции не смешивались вместе, а код выглядел Будет более чистым и аккуратным, из которых Shadow DOM является ключевой особенностью, на которую полагаются упаковки DOM и CSS.
2.3 Другие сценарии, которые необходимо изолировать
3. Поддержка основных браузеров.
Среди них Chrome, Opera и Safari поддерживают Shadow DOM по умолчанию, тогда как Firefox поддерживает его с версии 63. Видно, что Chrome лучше всего поддерживается, а IE до 11 не поддерживается, другой браузер Microsoft Edge. Если вы хотите переключиться на то же ядро, что и Chrome, тогда Edge определенно будет поддерживать Shadow DOM после изменения ядра.
Подробнее о поддержке браузером см. Https://caniuse.com/#feat=shadowdomv1.
4. Как создать Shadow DOM
Обратитесь к следующему примеру:
В этом простом примере вы можете увидеть «Стиль, определенный в Shadow DOM, не повлияет на элементы в основном документе», как показано ниже.
Element.attachShadow Параметры shadowRootInit из mode Опция используется для установки «Режима пакета». У него есть два необязательных значения:
«open»: Да Host Пройдено по элементу host.shadowRoot Получить shadowRoot Цитата, так что любой код может пройти shadowRoot Дочернее дерево DOM для посещения.
5. Какие элементы можно прикрепить к Shadow DOM
Не все элементы HTML могут открывать Shadow DOM, только ограниченный набор элементов может быть присоединен к Shadow DOM. Иногда попытка прикрепить дерево Shadow DOM к определенным элементам вызывает DOMException Ошибка, например:
использовать Такой неконтейнерный элемент нецелесообразен в качестве теневого хоста, поэтому этот код вызовет ошибку DOMException. Кроме того, некоторые элементы не могут быть присоединены к теневой модели DOM (например, элемент A) по соображениям безопасности.Еще одна причина ошибок заключается в том, что браузер уже подключил теневую модель DOM с этим элементом, например Input.
В следующей таблице перечислены все поддерживаемые элементы:
6. Как применить Shadow DOM в React
Как следует использовать Shadow DOM в проектах на основе React? Например, вы пишете общий компонент для разных продуктов или предприятий на основе React, который можно встраивать и интегрировать. Например, вы проектируете или разрабатываете приложение с «микро интерфейсной архитектурой» на основе React.
Когда мы пишем приложения React, мы обычно не хотим повсюду манипулировать DOM, потому что это не React (прилагательное). Можно ли упаковать его в компонентный стиль React (прилагательное) для использования Shadow DOM?
6.1. Попробуйте написать компонент React:
6.2. На основе прямой операции преобразования DOM:
Пройти в React ref Можете ли вы передать собственный DOM API после получения реальной ссылки на DOM? host из children перейти к host.shadowRoot В?
Посмотрите на эффект в браузере, вы увидите, что он может отображаться нормально. Но при этом будет проблема «события, изолированные на элементах в ShadowRoot, не могут быть запущены». В чем причина?
Это вызвано «механизмом синтетических событий» React. Мы знаем, что «события» в React не связаны напрямую с конкретными элементами DOM, а через document Привязка ReactEventListener Для управления, когда элемент щелкают или запускаются другие события, событие dispatch Чтобы document В это время React обработает и запустит выполнение соответствующего события синтеза.
Тогда почему синтетические события не могут нормально запускаться в Shadow DOM? Это связано с тем, что браузер будет «перенаправлять» события при захвате вне теневой DOM, а это означает, что событие, которое происходит в теневой DOM, будет захвачено извне с использованием хост-элемента в качестве источника событий. Это заставит React не думать, что события, привязанные к элементам в ShadowDOM на основе синтаксиса JSX, были инициированы, когда React обрабатывает синтетические события.
6.3. Попробуйте преобразовать его с помощью ReactDOM.render:
ReactDOM.render Второй параметр можно передать в элементе DOM. Это может пройти? ReactDOM.render Будет ReactEements А как насчет рендеринга в Shodaw DOM? Взгляните на следующие попытки:
Вы можете видеть сквозь ReactDOM.render ладить children Рендеринг может быть выполнен в обычном режиме ShadowRoot В, и синтетическое событие в Shadow DOM также может запускаться и выполняться нормально.
Почему может быть запущено «Событие элемента, изолированное в теневой DOM»? Потому что, когда React обнаруживает, что цель рендеринга находится в ShadowRoot, он привязывает событие к передаче Element.getRootNode() Получено DocumentFragment из RootNode На.
Кажется, все идет хорошо, но вы обнаружите, что при обновлении состояния родительского компонента компонент ShadowView не обновляется. Как и в примере выше, отображаемое в нем сообщение все еще старое, и причина в том, что мы используем ReactDOM.render В это время элементы и родительские компоненты Shadow DOM больше не находятся в одном контексте рендеринга React.
6.4. Используйте ReactDOM.createPortal для реализации версии:
мы знаем createPortal Появление «всплывающих окон, окон подсказок» и других компонентов, которые находятся вне документооборота, обеспечивает удобство разработки, заменяя ранее нестабильный API. unstable_renderSubtreeIntoContainer 。
Ух! Все нормально, есть небольшая проблема createPortal Версии ниже React 16 не поддерживаются, но в большинстве случаев это не большая проблема.
7. Компонент ShadowView для React
ShadowView в настоящее время полностью совместим с React 15/16, и поведение компонентов, таких как «обработка событий, обновление рендеринга компонентов», одинаково в обеих версиях.