From 87c9e27759895b17787f99af3c419d201af66099 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 Jan 2022 22:31:36 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/customelementregistry/whendefined/index.md | 140 ++++++++++----------- 1 file changed, 63 insertions(+), 77 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/customelementregistry/whendefined/index.md b/files/ja/web/api/customelementregistry/whendefined/index.md index 668e82e82b..8897b1acfd 100644 --- a/files/ja/web/api/customelementregistry/whendefined/index.md +++ b/files/ja/web/api/customelementregistry/whendefined/index.md @@ -4,105 +4,91 @@ slug: Web/API/CustomElementRegistry/whenDefined tags: - API - CustomElementRegistry - - Method - - Reference - - Web Components - - custom elements + - メソッド + - リファレンス + - ウェブコンポーネント + - カスタム要素 - whenDefined translation_of: Web/API/CustomElementRegistry/whenDefined --- -

{{APIRef("CustomElementRegistry")}}

+{{APIRef("CustomElementRegistry")}} -

{{domxref("CustomElementRegistry")}} インターフェイスの whenDefined() メソッドは、指定した名前のエレメントが定義されたときに解決される {{jsxref("Promise")}} を返します。

+**`whenDefined()`** は {{domxref("CustomElementRegistry")}} インターフェイスのメソッドで、指定した名前の要素が定義されたときに解決されるプロミス ({{jsxref("Promise")}}) を返します。 -

構文

+## 構文 -
Promise<> customElements.whenDefined(name);
+```js +customElements.whenDefined(name): Promise; +``` -

引数

+### 引数 -
-
name
-
カスタムエレメントの名前。
-
+- name + - : カスタム要素の名前。 -

返り値

+### 返値 -

カスタムエレメントが定義されたとき、{{jsxref("Promise")}} は {{jsxref("undefined")}} に解決します。カスタムエレメントがすでに定義済みであった場合、promise は即座に解決されます。

+指定された名前の[カスタム要素](/ja/docs/Web/API/Window/customElements)が定義された時に、[カスタム要素](/ja/docs/Web/API/Window/customElements)のコンストラクターで履行されるプロミス ({{jsxref("Promise")}}) です。（そのような[カスタム要素](/ja/docs/Web/API/Window/customElements)が既に定義されている場合、返されるプロミスは直ちに履行されます。） -
-
+## 例外 -

例外

- - - - - - - - - - - - - - +
例外説明
SyntaxError与えられた名前が有効なカスタムエレメントの名前出ない場合、promise は SyntaxError で reject します。
+ + + + + + + + + + + +
例外説明
SyntaxError + 指定された名前が有効なカスタム要素名でなかった場合、プロミスは SyntaxError で拒否されます。 +
-

例

+## 例 -

以下の例では、whenDefined() を用いてメニューを生成するカスタムエレメントが定義されたタイミングを検出しています。実際にメニューコンテンツの表示準備が完了するまでは、メニューはプレースホルダーのコンテンツを表示します。

+以下の例では、 `whenDefined()` を用いてメニューを生成するカスタム要素が定義されたタイミングを検出しています。実際にメニューコンテンツの表示準備が完了するまでは、メニューはプレースホルダーのコンテンツを表示します。 -
<nav id="menu-container">
-  <div class="menu-placeholder">読み込み中...</div>
-  <nav-menu>
-    <menu-item>Item 1</menu-item>
-    <menu-item>Item 2</menu-item>
+```html
+
+ Item N + + +``` -
const container = document.getElementById('menu-container');
+```js
+const container = document.getElementById('menu-container');
 const placeholder = container.querySelector('.menu-placeholder');
-// まだ定義されていないメニューの子供を取得する
+// まだ定義されていないメニューの子を取得する
 const undefinedElements = container.querySelectorAll(':not(:defined)');
 
-const promises = [...undefinedElements].map(
-  button => customElements.whenDefined(button.localName)
-);
-
-// すべての子供が更新されるまで待ち、
-// プレースホルダーを削除する。
-await Promise.all(promises);
-container.removeChild(placeholder);
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("HTML WHATWG", "#dom-customelementregistry-whendefined", "customElements.whenDefined()")}}{{Spec2("HTML WHATWG")}}初期定義
+async function removePlaceholder(){ + const promises = [...undefinedElements].map( + button => customElements.whenDefined(button.localName) + ); + + // すべての子がアップグレードされるまで待つ + await Promise.all(promises); + // それからプレースホルダーを削除 + container.removeChild(placeholder); +} + +removePlaceholder(); +``` -

ブラウザ互換性

+## 仕様書 -
-
+{{Specifications}} +## ブラウザーの互換性 -

{{Compat("api.CustomElementRegistry.whenDefined")}}

-
-
+{{Compat}} -- cgit v1.2.3-54-g00ecf