Как реагировать на первую краску/макет после распределения начального слота

Question

У меня есть пользовательский элемент, my-el, который в своем шаблоне DOM (теневой корень) содержит элемент slot. На веб-странице я использую my-el, размещая дополнительные элементы между тегами <my-el></my-el>, как показано ниже.

<my-el> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</my-el> 

Я намерен измерить Размеры div S', помещенные в my-el, поскольку они находятся в распределенном дерева, , как только (т.е. в первый раз), они отображаются на странице. Согласно spec:

Чтобы назначить slotables, для слота слот с дополнительным флагом подавляют сигнализации (не установлено, если не указано иное), выполнить следующие действия:

1. Пусть slotables быть результатом поиска слотов для слота.

2. Если подавить сигнализации флаг не установлен и slotables и назначенные узлы слота не являются идентичными, затем запустить сигнал изменения слота для слота.

...

Если я правильно понял, первое распределение слотов slottables не срабатывает на событие slotchange, так как подавить сигнализации флаг устанавливается, когда слот не выполняется начальное распределение, далее указано в Shadow DOM v1: Self-Contained Web Components. Это означает, что я не могу выполнить начальное измерение дочерних элементов в обратном вызове slotchange. Кроме того, следующий подход не гарантирует, что в этот момент дети будут оказываться:

connectedCallback() { 
    super.connectedCallback(); 

    requestAnimationFrame(() => { 
    // Measure chilren 
    }); 
} 

Вопрос

Как я могу вызвать мои измерения на первый раз они были оказаны после распределения в slot в my-el?

Answer 1

Вы можете определить переменную в своем пользовательском элементе, который будет установлен при первом рендеринге ваших элементов (либо в connectedCallback, либо в событии slotchange).

Затем проверьте значение переменной, чтобы решить, является ли это рендерингом в первый раз.

customElements.define('c-e', class extends HTMLElement 
 
{ 
 
    connectedCallback() 
 
    { 
 
     var sh = this.attachShadow({ mode: 'open' }) 
 
     sh.appendChild(T1.content.cloneNode(true)) 
 
     
 
     sh.querySelector('button').onclick = ev => 
 
      this.appendChild(document.createElement('div')).innerHTML = 'new div' 
 

 
     sh.querySelector('slot').addEventListener('slotchange', ev => 
 
      !len && (len = this.render())) 
 

 
     var len = this.render() 
 
    } 
 

 
    render() 
 
    { 
 
     var count = this.querySelectorAll('div').length 
 
     if (count) 
 
      console.info('%s elem. first rendered in %s', count, this.id) 
 
     return count 
 
    } 
 
})

<c-e id=CE1> 
 
    <div>div 1</div> 
 
    <div>div 2</div> 
 
</c-e> 
 
<c-e id=CE2> 
 
</c-e> 
 

 
<template id=T1> 
 
    <style> 
 
    :host { 
 
     display: inline-flex; 
 
     flex-direction: column; 
 
     width: 150px; 
 
     border: 1px solid lightblue; 
 
     min-height: 4em; 
 
     margin: 5px; 
 
     background: #f7f7f7; 
 
    } 
 
    </style> 
 
    <div> 
 
    <button>add div</button> 
 
    </div> 
 
    <slot> 
 
    </slot> 
 
</template>