We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CustomElementRegistry.whenDefined()

这篇翻译不完整。请帮忙从英语翻译这篇文章

 当一个元素被定义时CustomElementRegistry 中的方法whenDefined() 接口返回  Promise.

语法

Promise<> customElements.whenDefined(name);

参数

name
自定义元素的名称

返回值

当自定义元素被定义时一个Promise 返回{jsxref("undefined")}}. 如果自定义元素已经被定义,则resolve立即执行。

例外

Exception Description
SyntaxError If the provided name is not a valid custom element name, the promise rejects with a SyntaxError.

例子

这个例子使用whenDefined() 来检测生成菜单的自定义元素何时被定义. 这个菜单显示占位符内容一直到菜单内容已经准备好显示.

<nav id="menu-container">
  <div class="menu-placeholder">Loading...</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
     ...
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>
const container = document.getElementById('menu-container');
const placeholder = container.querySelector('.menu-placeholder');
// Fetch all the children of menu that are not yet defined.
const undefinedElements = container.querySelectorAll(':not(:defined)');

const promises = [...undefinedElements].map(
  button => customElements.whenDefined(button.localName)
);

// Wait for all the children to be upgraded, 
// then remove the placeholder.
await Promise.all(promises);
container.removeChild(placeholder);

规范

Specification Status Comment
HTML Living Standard
customElements.whenDefined()
Living Standard Initial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

661

542

No3

594

Yes — 595

No

531

412

10.16
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

661

542

661

542

No3

594

Yes — 595

531

412

10.166.02

1. Support for 'Customized built-in elements' as well.

2. Support for 'Autonomous custom elements' only.

3. Under consideration

4. From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

6. Supports 'Autonomous custom elements' but not 'Customized built-in elements'

文档标签和贡献者

此页面的贡献者: bluetomlee
最后编辑者: bluetomlee,