自定義元素構建時獲取 this.textContent

Question

對於那些在沒有看到具體代碼示例的情況下理解自定義元素的人來說，這是一個概念性問題。

我正在創建一個自定義元素，該元素的顯示取決於其 textContent。 在自定義元素的構造函數中，如果我嘗試訪問this.textContent它會返回一個空字符串，即使該自定義元素的 html 確實包含文本。

為了在自定義元素的構造過程中獲取textContent ，我將構造函數代碼包含在 setTimeout 中，然后能夠使我的自定義元素構造基於其textContent 。

但是，這感覺有點麻煩，我認為有一種更合適的方法可以在元素構建期間獲取 textContent。 那時我發現了Using the life Cycle Callbacks 。

connectedCallback方法允許我查看 textContent 而無需將 setTimeout 放入自定義元素的構造函數中。 然而，這句話讓我擔心：

連接回調：。 . . 可能在元素的內容被完全解析之前發生。

這讓我擔心，如果我在自定義元素中有很多內容， this.textContent可能仍會返回一個空字符串，因為所有這些文本可能尚未“完全解析”。

這種擔心有道理嗎？ 有沒有更可靠的方法來獲取this.textContent作為自定義元素構建的基礎？ 或者，我應該采用在自定義元素的構造函數中放置 setTimeout 的初始解決方案嗎？

Answer 1

在您的示例中textContent是 DOM 內容

constructor不應（嘗試）訪問 DOM，
因為當根本沒有 DOM 時，它可以從.createElement('your-element')運行。
（或在服務器端渲染場景中）

connectedCallback在整個 DOM 內部完成解析之前運行。 如果你想訪問它的 DOM 內容，你必須等到 Element DOM 准備好了。

只有在 FireFox 中你才能訪問 Element DOM 內容；
請參閱： 在 connectedCallback 中等待元素升級：FireFox 和 Chromium 差異

詳細分析見： https : //jsfiddle.net/CustomElementsExamples/n20bwckt/
請注意在 FireFox 和 Chrome 中運行時的區別。

設置超時（功能，0）

是完全有效的（但最好不在constructor ）並確保您的代碼在 EventLoop 為空時運行，從而在所有 DOM 准備好訪問時運行。 您也可以使用requestAnimationFrame 。
所有庫都在updateComplete做類似的事情來添加updateComplete等。
使用基本的自定義元素 API，您必須自己編寫。

注意： connectedCallback現在會觸發在（潛在的） disconnectedCallback之后運行的代碼，因此請在代碼中使用this.isConnected進行檢查。

有關所有回調運行時的可視化圖表，請參閱：
https://andyogo.github.io/custom-element-reactions-diagram/

注意：如果您沒有在自己的 Element 中指定任何方法，則運行 HTMLElement 中的方法。
所以沒有任何聲明的constructor或connectedCallback元素是完全有效的。
在IconMeister我只使用attributeChangedCallback