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

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

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

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

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

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

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

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

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

Примеры

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

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

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

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

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

Значение ошибки	Причина	Исход
not_found	Селектор не соответствует ни одному элементу	Остановки во время обхода; дальнейшие предки не были собраны.
invalid_selector	Селектор имеет неправильную форму.	Остановки во время обхода; дальнейшие предки не были собраны.
multiple_indirection	Вторая data-dt-ancestor встреча после того, как уже следовал за первой.	Обход продолжается через родительский элемент DOM.

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