Просмотр кода страницы Укажите логического предка для взаимодействий с пользователем

= Укажите логического предка для взаимодействий с пользователем =

'''Ранний доступ'''

По умолчанию '''JavaScript'''-код '''RUM''' обходит иерархию родительских элементов '''DOM''' для сбора унаследованных атрибутов, таких как <code>data-dt-component</code>, <code>data-dt-features</code>, <code>data-dt-children-name</code>, и маскирование. Когда элементы пользовательского интерфейса отображаются вне своего логического родителя в '''DOM''' — например, модальные окна, выпадающие списки и всплывающие подсказки, использующие порталы, — этот обход может упустить предполагаемый контекст.

Используйте атрибут <code>data-dt-ancestor</code> для переопределения связи «родитель-предок» в '''DOM''' с логическим родительским элементом. Установите его значение равным '''CSS'''-селектору, который однозначно идентифицирует предполагаемый логический элемент-предок.

== Варианты использования ==

* Модальные окна и диалоговые окна, отображаемые в корневом каталоге документа и логически относящиеся к определенному компоненту.
* Выпадающие меню, использующие порталы, которые отображаются вне элемента-триггера.
* Всплывающие подсказки и всплывающие окна расположены совершенно вне своего логического контекста.
* Любой шаблон пользовательского интерфейса, в котором структура '''DOM''' отличается от логической иерархии компонентов.

== Затронутые атрибуты ==

<code>data-dt-ancestor</code> влияет на все унаследованные атрибуты: <code>data-dt-component</code>, <code>data-dt-features</code>, <code>data-dt-children-name</code>, и маскирование.

== Примеры ==

* Модальное окно отображается вне своего логического родительского окна.
* Выпадающее меню с порталом '''React'''.
* Маскировка наследования через логического предка.

== Поведение и ограничения ==

* Чтобы предотвратить бесконечные циклы, перенаправление <code>data-dt-ancestor</code> выполняется только один раз во время обхода родительских элементов. После выполнения одного логического перенаправления родительского элемента последующие атрибуты <code>data-dt-ancestor</code> игнорируются, и обход продолжается через отношения родительских элементов '''DOM'''.
* Если селектор недействителен или не соответствует ни одному элементу, обход останавливается в этой точке. Обратный ход к родительскому элементу '''DOM''' не предусмотрен.
* Если селектор соответствует нескольким элементам, используется первый элемент в порядке следования элементов '''DOM'''.
* Обход пересекает открытые границы теневого '''DOM'''. Закрытые теневые корни блокируют обход.

== Поиск неисправностей ==

При возникновении проблем с селектором <code>data-dt-ancestor</code> в событие включаются диагностические поля:

{| class="wikitable"
|-
! Значение ошибки !! Причина !! Исход
|-
| <code>not_found</code> || Селектор не соответствует ни одному элементу || Остановки во время обхода; дальнейшие предки не были собраны.
|-
| <code>invalid_selector</code> || Селектор имеет неправильную форму. || Остановки во время обхода; дальнейшие предки не были собраны.
|-
| <code>multiple_indirection</code> || Вторая <code>data-dt-ancestor</code> встреча после того, как уже следовал за первой. || Обход продолжается через родительский элемент '''DOM'''.
|}

Диагностические поля <code>dt.support.ui_element.ancestor.error</code> и <code>dt.support.ui_element.ancestor.selector</code> включаются в зафиксированное событие для устранения неполадок. Спецификации полей см. в разделе «Взаимодействие с пользователем» в семантическом словаре.