Web組件offsetHeight / offsetWidth連接時為零

Question

我正在嘗試將我的庫轉換為Web組件，並且何時告訴組件已布置時遇到了問題。

Web組件有一個名為connectedCallback的回調，看起來可能是我需要的回調，但是在回調中檢查自身時，我的偏移量均為零：

connectedCallback() {
  console.log(this.offsetWidth, this.offsetHeight);
}

當我在維度查詢中排隊時，維度就在那里，因此在Web組件連接和事件隊列到達下一項之間的某個時間，Web組件被瀏覽器引擎布局，從而獲得正確的維度值：

connectedCallback() {
  setTimeout(() => console.log(this.offsetWidth, this.offsetHeight), 0);
}

我想知道是否有一個回調來告訴布局事件何時發生？

Answer 1

我創建了一個沒有shadowDOM的簡單組件。 我在構造函數中編寫了以下代碼：

this.addEventListener('readystatechange', (evt) => {console.log('readystatechange', evt)});
this.addEventListener('load', (evt) => {console.log('load', evt)});
this.addEventListener('progress', (evt) => {console.log('progress', evt)});
this.addEventListener('DOMContentLoaded', (evt) => {console.log('DOMContentLoaded', evt)});

而且沒有輸出。 因此，這些事件都不會在Web組件上觸發。

然后，我將此代碼添加到組件之外：

function callback(mutationsList, observer) {
  for(var mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if (mutation.removedNodes.length) {
        console.log(`${mutation.removedNodes.length} child node(s) have been removed.`);
      }

      if (mutation.addedNodes.length) {
        console.log(`${mutation.addedNodes.length} child node(s) have been added.`);
      }
    }
  }
}
var config = { childList: true };
var observer = new MutationObserver(callback);

這行到構造函數：

observer.observe(this, config);

在我的特定組件上，從未調用過callback 。

我確實有一個不同的組件來更改其子代，並調用了回調。

因此，我看不到任何事件，甚至看不到組件完全加載時觸發的突變觀察器。

就個人而言，我將像您一樣使用setTimeout因為這似乎是在組件完成后獲得調用的唯一肯定的方法。 盡管您可能必須具體設置setTimeout ，以確保已完全呈現DOM。

Answer 2

這些值依賴於整個DOM因此需要一個DOM重繪.. 這還沒有發生 。

如果每個元素都會觸發DOM重繪，我們都會抱怨性能。

瀏覽器決定（瀏覽器特定的邏輯）何時進行DOM重繪。

在 DOM重新繪制后執行代碼的常用方法是setTimeout( FUNC , 0 )

因此嚴格來說，這不會強制 DOM重新繪制，但瀏覽器仍在決定何時重新繪制
如果您有一個長時間運行的腳本...。FUNC將在長時間運行的腳本完成后執行。

是的，活動會很好...
但這需要占用CPU周期...在1000個案例中有997個不需要信息
..因此沒有活動

因此，在確實需要DOM信息的情況下，有0,03％的情況下，您需要執行setTimeout

請注意，這不是特定於“自定義元素”的，對於appendChild調用同樣適用。

如果您有大量需要此偏移量信息的組件，則可能需要查看進行虛擬DOM區分的Framework

更多背景： 中等：重塗/重排到底是什么（2019年）