Что нам нужно сделать в принятом обратном вызове пользовательского элемента?

Question

Я прочитал различные документы по пользовательским элементам и adoptedCallback, в которых говорится что-то вроде «вызывается, когда элемент принят в другой документ, т.е. когда кто-то вызывает Document.importNode (customElement)».Но это не очень много информации.

Зачем мне нужен принятый ответ?Другими словами, что будет особенно полезно для adoptedCallback?Каковы некоторые практические примеры?Чего бы конкретно хотел достичь автор пользовательского элемента с помощью adoptedCallback?О каких сценариях многие авторы пользовательских элементов не задумываются, но которые они должны рассмотреть и обработать в adoptedCallback?

Answer 1

Основной вариант использования, который я вижу, это когда вы хотите переместить некоторые пользовательские элементы.

• Если у вас есть пользовательский элемент в <iframe> и вы хотите, чтобы он переместился на другой <iframe>или к основному документу вы можете захотеть выполнить некоторые операции, когда документ владельца пользовательского элемента изменился, но не тогда, когда пользовательский элемент был перемещен внутри того же <iframe> или документа.

Пример:IDE с перетаскиванием с панели инструментов в целевой HTML-документ.

• В другом случае вам может потребоваться выполнить дорогостоящие операции (расчет, загрузка данных) в пользовательском элементе только один раз.при импорте (в adoptedCallck()), а не при каждом подключении (в connectedCallback()).

Пример: лист / таблица с удаленными данными.

Это былотакже в случае с импортом HTML, но теперь это менее актуально.