У меня есть пользовательский элемент <my-el>
, структурно похожий на этот (чисто статический HTML-код, отображаемый на сервере):
<my-el>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</my-el>
Поскольку Chrome не гарантирует доступность дочернего элемента в connectedCallback
пользовательских элементов , я использую HTMLParsedElement
, что в основном задерживает инициализацию пользовательских элементов с помощью следующих шагов:
- Проверка, является ли элемент (или любой элемент-предок)имеет
nextSibling
(в этом случае синтаксический анализатор предположительно прошел my-el
) или если достигнут DOMContentLoaded
(он же document.readyState !== 'loading'
). - Если ничего из вышеперечисленного не установлено, установите
MutationObserver
на childList
, который повторно проверяет вышеуказанные условия.
Проблема, которая в настоящее время остается с описанной стратегией, заключается в том, что MutationObserver
может быть запущено, когда доступен HTML:
<my-el>
<div>a</div>
<div>b</div>
</my-el>
Или даже это
<my-el>
<div>a</div>
</my-el>
В этих случаях MutationObserver запускается несколько раз, и обработчик не может знать, когда на самом деле достигнут конец </my-el>
.
Вопрос: Кто-нибудь знаетw если обтекание всех внутренних элементов div
, как это, решило бы эту проблему:
<my-el>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
</my-el>
Или другими словами, когда наблюдатель мутации запускает эту структуру, могу ли я надежно предположить дочерний элемент обтеканияdiv полностью доступен, включая все его дочерние узлы?