connectedCallback 与 window.load

Question

如果自定义元素包含在纯 HTML 正文中，首先发生什么事件？

const elem = document.getElementById('test');

window.addEventListener('load', () => {
  elem.innerHTML = 'window.load';
});

class myDiv extends HTMLElement {
  connectedCallback() {
    elem.innerHTML = 'connectedCallback';
  }
}

customElements.define('my-div', myDiv);

<my-div id="test"></my-div>

看起来 window.load 总是排在最后。

Answer 1

如@zer00ne 所述，一般规则是 windows.onload 最后调用，只要所有内容都已在页面上。

如果您动态创建元素，那么它们的 constructor 和 connectedCallback 函数将在 window.onload 之后调用。

此外，如果您延迟加载任何组件，那么它们将在 window.onload 之后运行，即使您将它们的 HTML 放在 [=15= 触发器之前的页面中也是如此].

    const loaded = msg => () => console.log(msg);

    window.onload = loaded('window.onload');

    class MyEl extends HTMLElement {
      constructor() {
        super();
        loaded('MyEl.constructor')();
      }

      connectedCallback() {
        loaded('MyEl.connectedCallback')();
      }
    }

    customElements.define('my-el', MyEl);

    setTimeout(()=>{
      console.log('About to create element');
      var newEl = document.createElement('my-el');
      console.log('About to add element to body');
      document.body.appendChild(newEl);
    }, 1000);
    setTimeout(()=>{
      console.log('About to create new script tag');
      newEl = document.createElement('script');
      newEl.textContent = `
      class MyEl2 extends HTMLElement {
        constructor() {
          super();
          loaded('MyEl2.constructor')();
        }

        connectedCallback() {
          loaded('MyEl2.connectedCallback')();
        }
      }

      customElements.define('my-el-2', MyEl2);
      `;
      console.log('About to add script element to body');
      document.body.appendChild(newEl);
    }, 2000);

    <my-el></my-el>
    <my-el-2></my-el-2>

connectedCallback 与 window.load

connectedCallback vs window.load

javascript

custom-element