如何在调用任何构造函数之前定义所有自定义元素？

Question

我有两个自定义元素：One 和 Two。 One 有一个功能。 Two 有一个 One 的孩子，并尝试在其构造函数中调用该函数。它说如果我在One 之前在Two 上调用customElements.define()，则该函数不存在。但是，如果我在Two 之前定义One，它就可以正常工作。

在我的实际项目中，我无法控制它们的定义顺序，默认情况下它们的定义顺序错误。

我尝试调用connectedCallback()中的函数，但也失败了。

具体什么时候调用构造函数？

有什么方法可以确保在调用任何构造函数之前都定义了它们？

class One extends HTMLElement {
  constructor() {
    super()
    console.log('one constructor')
  }
  
  myFunc() {
    console.log('it worked!')
  }
}

class Two extends HTMLElement {
  constructor() {
    super()
    console.log('two constructor')
    
    this.innerHTML = '<my-one></my-one>'
    this.myOne = document.querySelector('my-one')
    
    // this part fails
    this.myOne.myFunc()
  }
  
  connectedCallback() {
    // this also fails
    this.myOne.myFunc()
  }
}

// this works
// customElements.define("my-one", One)
// customElements.define("my-two", Two)

// this breaks
customElements.define("my-two", Two)
customElements.define("my-one", One)

<my-two></my-two>

Answer 1

这一切都与 Web 组件的生命周期有关，以及当标签从 HTMLUnknownElement 升级到您的实际组件时

一个组件分两步定义。

1) 类的定义 2) 拨打customElements.define

是的，这两个可以写在一起：

customElements.define('dog-food', class extends HTMLElement{});

但是类定义仍然发生在customElements.define 被调用之前。

只有在发生两件事时，元素才会升级为自定义元素：

1) 自定义元素必须使用customElements.define 和 2) 自定义元素必须要么 1) 使用document.createElement 或new MyElement 实例化 2) 被添加到 DOM 树中

此示例将元素放入 DOM，但 1 秒内未定义。

我在定义之前显示构造函数，然后在定义之后再次显示。

class One extends HTMLElement {
  constructor() {
    super();
    console.log('one constructor');
  }

  connectedCallback() {
    this.innerHTML = "I have upgraded";
  }
}

let el = document.querySelector('my-one');

setTimeout(() => {
  customElements.define("my-one", One);
  console.log('after: ', el.constructor.toString().substr(0,30));
}, 1000);

console.log('before: ', el.constructor);
  

<my-one>I am just a simple element</my-one>

在您的代码中，您使用innerHTML 来“加载”<my-one>。但是由于 <my-two> 在调用构造函数时可能还没有“真正”在 DOM 中，所以 innerHTML 不会在 DOM 中，因此，<my-one> 还不会升级。

您可以做的一件事是等待<my-two> 组件真正放入DOM，方法是等待更改connectedCallback 函数中的innerHTML：

class One extends HTMLElement {
  constructor() {
    super();
    console.log('one constructor');
  }
  
  myFunc() {
    console.log('it worked!');
  }
}

class Two extends HTMLElement {
  constructor() {
    super();
    console.log('two constructor');
  }
  
  connectedCallback() {
    this.innerHTML = '<my-one></my-one>';
    setTimeout(() => {
      this.myOne = document.querySelector('my-one');
      this.myOne.myFunc();
    });
  }
}

customElements.define("my-two", Two)
customElements.define("my-one", One)

<my-two></my-two>

您会注意到，我仍然必须将对 <my-one> 中的函数的调用置于 setTimeout 调用中。这是因为 <my-one> 元素只有在您的 connectedCallback 函数存在之后才能升级。升级需要一个运行的机会，它不会在你的函数中间运行。

另一种方法是直接调用<my-one> 的构造函数：

class One extends HTMLElement {
  constructor() {
    super();
    console.log('one constructor');
  }

  connectedCallback() {
    this.innerHTML = "one";
  }

  myFunc() {
    console.log('it worked!');
  }
}

class Two extends HTMLElement {
  constructor() {
    super();
    console.log('two constructor');
  }
  
  connectedCallback() {
    customElements.whenDefined('my-one').then(() => {
      this.myOne = document.createElement('my-one');
      this.append(this.myOne);
      this.myOne.myFunc();
    });
  }
}

customElements.define("my-two", Two);
customElements.define("my-one", One);

<my-two></my-two>

在这里您会注意到我必须添加对customElements.whenDefined 的调用。这将等到<my-one> 被实际定义，然后再尝试实例化它。一旦它被定义，你就可以创建它并立即调用成员函数。

最后一件事。对于在 Web 组件的构造函数中应该做什么和不应该做什么，有一些规则。它们在这里定义https://w3c.github.io/webcomponents/spec/custom/#custom-element-conformance

但我要指出的一件事是，您不应该触摸或更改构造函数中的任何属性或子元素。主要是因为在构建 Web Component 时没有属性或任何子元素。这些都是事后更改和添加的。