From 42b7f6c057ecc8866ee9f4b8fce9c3d7157e1a35 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 Jan 2022 19:47:33 +0900 Subject: カスタム要素に関する Web API を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../customelementregistry/whendefined/index.html | 108 --------------------- .../api/customelementregistry/whendefined/index.md | 108 +++++++++++++++++++++ 2 files changed, 108 insertions(+), 108 deletions(-) delete mode 100644 files/ja/web/api/customelementregistry/whendefined/index.html create mode 100644 files/ja/web/api/customelementregistry/whendefined/index.md (limited to 'files/ja/web/api/customelementregistry/whendefined') diff --git a/files/ja/web/api/customelementregistry/whendefined/index.html b/files/ja/web/api/customelementregistry/whendefined/index.html deleted file mode 100644 index 668e82e82b..0000000000 --- a/files/ja/web/api/customelementregistry/whendefined/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: CustomElementRegistry.whenDefined() -slug: Web/API/CustomElementRegistry/whenDefined -tags: - - API - - CustomElementRegistry - - Method - - Reference - - Web Components - - custom elements - - whenDefined -translation_of: Web/API/CustomElementRegistry/whenDefined ---- -

{{APIRef("CustomElementRegistry")}}

- -

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

- -

構文

- -
Promise<> customElements.whenDefined(name);
- -

引数

- -
-
name
-
カスタムエレメントの名前。
-
- -

返り値

- -

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

- -
-
- -

例外

- - - - - - - - - - - - - - -
例外説明
SyntaxError与えられた名前が有効なカスタムエレメントの名前出ない場合、promise は SyntaxError で reject します。
- -

例

- -

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

- -
<nav id="menu-container">
-  <div class="menu-placeholder">読み込み中...</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');
-// まだ定義されていないメニューの子供を取得する
-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")}}初期定義
- -

ブラウザ互換性

- -
-
- - -

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

-
-
diff --git a/files/ja/web/api/customelementregistry/whendefined/index.md b/files/ja/web/api/customelementregistry/whendefined/index.md new file mode 100644 index 0000000000..668e82e82b --- /dev/null +++ b/files/ja/web/api/customelementregistry/whendefined/index.md @@ -0,0 +1,108 @@ +--- +title: CustomElementRegistry.whenDefined() +slug: Web/API/CustomElementRegistry/whenDefined +tags: + - API + - CustomElementRegistry + - Method + - Reference + - Web Components + - custom elements + - whenDefined +translation_of: Web/API/CustomElementRegistry/whenDefined +--- +

{{APIRef("CustomElementRegistry")}}

+ +

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

+ +

構文

+ +
Promise<> customElements.whenDefined(name);
+ +

引数

+ +
+
name
+
カスタムエレメントの名前。
+
+ +

返り値

+ +

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

+ +
+
+ +

例外

+ + + + + + + + + + + + + + +
例外説明
SyntaxError与えられた名前が有効なカスタムエレメントの名前出ない場合、promise は SyntaxError で reject します。
+ +

例

+ +

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

+ +
<nav id="menu-container">
+  <div class="menu-placeholder">読み込み中...</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');
+// まだ定義されていないメニューの子供を取得する
+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")}}初期定義
+ +

ブラウザ互換性

+ +
+
+ + +

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

+
+
-- cgit v1.2.3-54-g00ecf