代码之家 › 专栏 › 技术社区 › anatoly techtonik Tony

connectedcallback与window.load

custom-element javascript

anatoly techtonik Tony · 技术社区 · 7 年前

如果自定义元素包含在纯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 总是最后一个。

1 回复 | 直到 7 年前

Intervalia 7 年前

正如@zer00ne所说,一般规则是 windows.onload 只要页面上的所有内容都已存在,则称为“最后”。

如果动态创建元素,则 constructor 和 connectedCallback 函数将在之后调用 window.onload .

另外,如果您延迟加载任何组件,则它们将在 窗口加载 即使你把他们的html放在 窗口加载 .

    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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前