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 --- .../api/customelementregistry/define/index.html | 229 --------------------- .../web/api/customelementregistry/define/index.md | 229 +++++++++++++++++++++ files/ja/web/api/customelementregistry/index.html | 101 --------- files/ja/web/api/customelementregistry/index.md | 101 +++++++++ .../customelementregistry/whendefined/index.html | 108 ---------- .../api/customelementregistry/whendefined/index.md | 108 ++++++++++ files/ja/web/api/document/createelement/index.html | 134 ------------ files/ja/web/api/document/createelement/index.md | 134 ++++++++++++ files/ja/web/api/window/customelements/index.html | 73 ------- files/ja/web/api/window/customelements/index.md | 73 +++++++ 10 files changed, 645 insertions(+), 645 deletions(-) delete mode 100644 files/ja/web/api/customelementregistry/define/index.html create mode 100644 files/ja/web/api/customelementregistry/define/index.md delete mode 100644 files/ja/web/api/customelementregistry/index.html create mode 100644 files/ja/web/api/customelementregistry/index.md delete mode 100644 files/ja/web/api/customelementregistry/whendefined/index.html create mode 100644 files/ja/web/api/customelementregistry/whendefined/index.md delete mode 100644 files/ja/web/api/document/createelement/index.html create mode 100644 files/ja/web/api/document/createelement/index.md delete mode 100644 files/ja/web/api/window/customelements/index.html create mode 100644 files/ja/web/api/window/customelements/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/customelementregistry/define/index.html b/files/ja/web/api/customelementregistry/define/index.html deleted file mode 100644 index 47c9718674..0000000000 --- a/files/ja/web/api/customelementregistry/define/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: CustomElementRegistry.define() -slug: Web/API/CustomElementRegistry/define -translation_of: Web/API/CustomElementRegistry/define ---- -

{{APIRef("CustomElementRegistry")}}

- -

{{domxref("CustomElementRegistry")}} インターフェイスの define() メソッドは、新しいカスタムエレメントを定義します。

- -

作成することができるのは、次の2種類のカスタムエレメントです。

- - - -

構文

- -
customElements.define(name, constructor, options);
-
- -

パラメータ

- -
-
name
-
新しいカスタムエレメントの名前。カスタムエレメントの名前には、少なくとも1つのハイフンが含まれなければならないことに注意してください。
-
constructor
-
新しいカスタムエレメントのコンストラクタ
-
options {{optional_inline}}
-
エレメントの定義の仕方を制御するオブジェクト。現在は、次の1つのオプションのみサポートされています。 -
    -
  • extends: 拡張するビルトイン要素の名前を示す文字列。カスタムビルトインエレメントを作成するのに使われる。
    • -
-
-
- -

返り値

- -

なし。

- -

例外

- - - - - - - - - - - - - - - - - - - - - - -
例外説明
NotSupportedErrorThe {{domxref("CustomElementRegistry")}} already contains an entry with the same name or the same constructor (or is otherwise already defined), or extends is specified and it is a valid custom element name, or extends is specified but the element it is trying to extend is an unknown element.
SyntaxErrorThe provided name is not a valid custom element name.
TypeErrorThe referenced constructor is not a constructor.
- -
-

注意: NotSupportedError 例外が多く発生する場合、define() が失敗しているように思えるかもしれませんが、多くの場合 {{domxref("Element.attachShadow()")}} に問題があります。

-
- -

例

- -

自律的カスタムエレメント (Autonomous custom element)

- -

The following code is taken from our popup-info-box-web-component example (see it live also).

- -
// Create a class for the element
-class PopUpInfo extends HTMLElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
-
-    // Create spans
-    var wrapper = document.createElement('span');
-    wrapper.setAttribute('class','wrapper');
-    var icon = document.createElement('span');
-    icon.setAttribute('class','icon');
-    icon.setAttribute('tabindex', 0);
-    var info = document.createElement('span');
-    info.setAttribute('class','info');
-
-    // Take attribute content and put it inside the info span
-    var text = this.getAttribute('text');
-    info.textContent = text;
-
-    // Insert icon
-    var imgUrl;
-    if(this.hasAttribute('img')) {
-      imgUrl = this.getAttribute('img');
-    } else {
-      imgUrl = 'img/default.png';
-    }
-    var img = document.createElement('img');
-    img.src = imgUrl;
-    icon.appendChild(img);
-
-    // Create some CSS to apply to the shadow dom
-    var style = document.createElement('style');
-
-    style.textContent = '.wrapper {' +
-                           'position: relative;' +
-                        '}' +
-
-                         '.info {' +
-                            'font-size: 0.8rem;' +
-                            'width: 200px;' +
-                            'display: inline-block;' +
-                            'border: 1px solid black;' +
-                            'padding: 10px;' +
-                            'background: white;' +
-                            'border-radius: 10px;' +
-                            'opacity: 0;' +
-                            'transition: 0.6s all;' +
-                            'position: absolute;' +
-                            'bottom: 20px;' +
-                            'left: 10px;' +
-                            'z-index: 3;' +
-                          '}' +
-
-                          'img {' +
-                            'width: 1.2rem' +
-                          '}' +
-
-                          '.icon:hover + .info, .icon:focus + .info {' +
-                            'opacity: 1;' +
-                          '}';
-
-    // attach the created elements to the shadow dom
-
-    shadow.appendChild(style);
-    shadow.appendChild(wrapper);
-    wrapper.appendChild(icon);
-    wrapper.appendChild(info);
-  }
-}
-
-// Define the new element
-customElements.define('popup-info', PopUpInfo);
-
- -
<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
-                                    security feature — it is the last 3 or 4
-                                    numbers on the back of your card.">
- -
-

注意: Constructors for autonomous custom elements must extend {{domxref("HTMLElement")}}.

-
- -

カスタムビルトインエレメント

- -

The following code is taken from our word-count-web-component example (see it live also).

- -
// Create a class for the element
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // count words in element's parent element
-    var wcParent = this.parentNode;
-
-    function countWords(node){
-      var text = node.innerText || node.textContent
-      return text.split(/\s+/g).length;
-    }
-
-    var count = 'Words: ' + countWords(wcParent);
-
-    // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
-
-    // Create text node and add word count to it
-    var text = document.createElement('span');
-    text.textContent = count;
-
-    // Append it to the shadow root
-    shadow.appendChild(text);
-
-
-    // Update count when element content changes
-    setInterval(function() {
-      var count = 'Words: ' + countWords(wcParent);
-      text.textContent = count;
-    }, 200)
-
-  }
-}
-
-// Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
- -

ブラウザ互換性

- -
- - -

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

-
diff --git a/files/ja/web/api/customelementregistry/define/index.md b/files/ja/web/api/customelementregistry/define/index.md new file mode 100644 index 0000000000..47c9718674 --- /dev/null +++ b/files/ja/web/api/customelementregistry/define/index.md @@ -0,0 +1,229 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +translation_of: Web/API/CustomElementRegistry/define +--- +

{{APIRef("CustomElementRegistry")}}

+ +

{{domxref("CustomElementRegistry")}} インターフェイスの define() メソッドは、新しいカスタムエレメントを定義します。

+ +

作成することができるのは、次の2種類のカスタムエレメントです。

+ + + +

構文

+ +
customElements.define(name, constructor, options);
+
+ +

パラメータ

+ +
+
name
+
新しいカスタムエレメントの名前。カスタムエレメントの名前には、少なくとも1つのハイフンが含まれなければならないことに注意してください。
+
constructor
+
新しいカスタムエレメントのコンストラクタ
+
options {{optional_inline}}
+
エレメントの定義の仕方を制御するオブジェクト。現在は、次の1つのオプションのみサポートされています。 +
    +
  • extends: 拡張するビルトイン要素の名前を示す文字列。カスタムビルトインエレメントを作成するのに使われる。
    • +
+
+
+ +

返り値

+ +

なし。

+ +

例外

+ + + + + + + + + + + + + + + + + + + + + + +
例外説明
NotSupportedErrorThe {{domxref("CustomElementRegistry")}} already contains an entry with the same name or the same constructor (or is otherwise already defined), or extends is specified and it is a valid custom element name, or extends is specified but the element it is trying to extend is an unknown element.
SyntaxErrorThe provided name is not a valid custom element name.
TypeErrorThe referenced constructor is not a constructor.
+ +
+

注意: NotSupportedError 例外が多く発生する場合、define() が失敗しているように思えるかもしれませんが、多くの場合 {{domxref("Element.attachShadow()")}} に問題があります。

+
+ +

例

+ +

自律的カスタムエレメント (Autonomous custom element)

+ +

The following code is taken from our popup-info-box-web-component example (see it live also).

+ +
// Create a class for the element
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create spans
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Take attribute content and put it inside the info span
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Insert icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Create some CSS to apply to the shadow dom
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // attach the created elements to the shadow dom
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Define the new element
+customElements.define('popup-info', PopUpInfo);
+
+ +
<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.">
+ +
+

注意: Constructors for autonomous custom elements must extend {{domxref("HTMLElement")}}.

+
+ +

カスタムビルトインエレメント

+ +

The following code is taken from our word-count-web-component example (see it live also).

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

ブラウザ互換性

+ +
+ + +

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

+
diff --git a/files/ja/web/api/customelementregistry/index.html b/files/ja/web/api/customelementregistry/index.html deleted file mode 100644 index e127680a70..0000000000 --- a/files/ja/web/api/customelementregistry/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: CustomElementRegistry -slug: Web/API/CustomElementRegistry -tags: - - API - - CustomElementRegistry - - Experimental - - Interface - - Landing - - Webコンポーネント - - custom elements - - レファレンス - - 試験的 -translation_of: Web/API/CustomElementRegistry ---- -

{{DefaultAPISidebar("Web Components")}}

- -

CustomElementRegistry インターフェイスはカスタムエレメントの登録と、登録された要素を紹介するためのメソッドを提供します。このインスタンスを取得するには、{{domxref("window.customElements")}} プロパティを使います。 

- -

メソッド

- -
-
{{domxref("CustomElementRegistry.define()")}}
-
新しいカスタムエレメントを定義。
-
{{domxref("CustomElementRegistry.get()")}}
-
指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメントが定義されていない場合は undefined を返す。
-
{{domxref("CustomElementRegistry.whenDefined()")}}
-
名前を与えられたカスタムエレメントが定義されたとき、空の {{jsxref("Promise", "promise")}}（resolves）を返す。もしそのようなカスタムエレメントが既に定義されていた場合、返された promise は即座に fulfill状態になります。
-
- -

例

- -

以下のコードは我々の word-count-web-component という例 (こちらのライブデモを見てください) から持ってきています。メモ: クラスを生成した後カスタムエレメント定義するための {{domxref("CustomElementRegistry.define()")}} メソッドの使用方法。

- -
// 要素のクラスを生成
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // コンストラクタ内ではまずはじめに必ず super をコールする
-    super();
-
-    // 親要素の要素内の count というワード
-    var wcParent = this.parentNode;
-
-    function countWords(node){
-      var text = node.innerText || node.textContent
-      return text.split(/\s+/g).length;
-    }
-
-    var count = 'Words: ' + countWords(wcParent);
-
-    // shadow root を生成
-    var shadow = this.attachShadow({mode: 'open'});
-
-    // テキストノードを生成し、count というワードを追加
-    var text = document.createElement('span');
-    text.textContent = count;
-
-    // shadow root に追加
-    shadow.appendChild(text);
-
-
-    // 要素のコンテンツが変化した時、count を更新
-    setInterval(function() {
-      var count = 'Words: ' + countWords(wcParent);
-      text.textContent = count;
-    }, 200)
-
-  }
-}
-
-// 新しい要素を定義
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
-

メモ: CustomElementsRegistry は {{domxref("Window.customElements")}} プロパティを通して利用可能です。

-
- -

仕様

- - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}{{Spec2("HTML WHATWG")}}初期定義。
- -

ブラウザ互換性

- - - - - -

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

diff --git a/files/ja/web/api/customelementregistry/index.md b/files/ja/web/api/customelementregistry/index.md new file mode 100644 index 0000000000..e127680a70 --- /dev/null +++ b/files/ja/web/api/customelementregistry/index.md @@ -0,0 +1,101 @@ +--- +title: CustomElementRegistry +slug: Web/API/CustomElementRegistry +tags: + - API + - CustomElementRegistry + - Experimental + - Interface + - Landing + - Webコンポーネント + - custom elements + - レファレンス + - 試験的 +translation_of: Web/API/CustomElementRegistry +--- +

{{DefaultAPISidebar("Web Components")}}

+ +

CustomElementRegistry インターフェイスはカスタムエレメントの登録と、登録された要素を紹介するためのメソッドを提供します。このインスタンスを取得するには、{{domxref("window.customElements")}} プロパティを使います。 

+ +

メソッド

+ +
+
{{domxref("CustomElementRegistry.define()")}}
+
新しいカスタムエレメントを定義。
+
{{domxref("CustomElementRegistry.get()")}}
+
指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメントが定義されていない場合は undefined を返す。
+
{{domxref("CustomElementRegistry.whenDefined()")}}
+
名前を与えられたカスタムエレメントが定義されたとき、空の {{jsxref("Promise", "promise")}}（resolves）を返す。もしそのようなカスタムエレメントが既に定義されていた場合、返された promise は即座に fulfill状態になります。
+
+ +

例

+ +

以下のコードは我々の word-count-web-component という例 (こちらのライブデモを見てください) から持ってきています。メモ: クラスを生成した後カスタムエレメント定義するための {{domxref("CustomElementRegistry.define()")}} メソッドの使用方法。

+ +
// 要素のクラスを生成
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // コンストラクタ内ではまずはじめに必ず super をコールする
+    super();
+
+    // 親要素の要素内の count というワード
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // shadow root を生成
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // テキストノードを生成し、count というワードを追加
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // shadow root に追加
+    shadow.appendChild(text);
+
+
+    // 要素のコンテンツが変化した時、count を更新
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// 新しい要素を定義
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
+

メモ: CustomElementsRegistry は {{domxref("Window.customElements")}} プロパティを通して利用可能です。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}{{Spec2("HTML WHATWG")}}初期定義。
+ +

ブラウザ互換性

+ + + + + +

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

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")}}

+
+
diff --git a/files/ja/web/api/document/createelement/index.html b/files/ja/web/api/document/createelement/index.html deleted file mode 100644 index a7ffc5f4dc..0000000000 --- a/files/ja/web/api/document/createelement/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Document.createElement() -slug: Web/API/Document/createElement -tags: - - API - - DOM - - Document - - Method - - Reference - - createElement - - メソッド -translation_of: Web/API/Document/createElement ---- -
{{APIRef("DOM")}}
- -

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

- -

構文

- -
var element = document.createElement(tagName[, options]);
-
- -

引数

- -
-
tagName
-
生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null) は createElement("null") のように動作します。
-
options{{optional_inline}}
-
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。
-
- -

返値

- -

新しい {{domxref("Element")}}。

- -

例

- -

基本的な例

- -

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

- -

HTML

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>||Working with elements||</title>
-</head>
-<body>
-  <div id="div1">The text above has been created dynamically.</div>
-</body>
-</html>
-
- -

JavaScript

- -
document.body.onload = addElement;
-
-function addElement () {
-  // 新しい div 要素を作成します
-  var newDiv = document.createElement("div");
-  // いくつかの内容を与えます
-  var newContent = document.createTextNode("Hi there and greetings!");
-  // テキストノードを新規作成した div に追加します
-  newDiv.appendChild(newContent);
-
-  // DOM に新しく作られた要素とその内容を追加します
-  var currentDiv = document.getElementById("div1");
-  document.body.insertBefore(newDiv, currentDiv);
-}
- -

{{EmbedLiveSample("Basic_example", 500, 50)}}

- -

ウェブコンポーネントの例

- -

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

- -
// Create a class for the element
-class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // constructor definition left out for brevity
-    ...
-  }
-}
-
-// Define the new element
-customElements.define('expanding-list', ExpandingList, { extends: "ul" });
- -

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

- -
let expandingList = document.createElement('ul', { is : 'expanding-list' })
- -

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

- -
-

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
- -

ブラウザーの互換性

- -

{{Compat("api.Document.createElement")}}

- -

関連情報

- - diff --git a/files/ja/web/api/document/createelement/index.md b/files/ja/web/api/document/createelement/index.md new file mode 100644 index 0000000000..a7ffc5f4dc --- /dev/null +++ b/files/ja/web/api/document/createelement/index.md @@ -0,0 +1,134 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - createElement + - メソッド +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

+ +

構文

+ +
var element = document.createElement(tagName[, options]);
+
+ +

引数

+ +
+
tagName
+
生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は tagName の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 createElement() は要素を生成する前に tagName を小文字に変換します。 Firefox, Opera, Chrome では、 createElement(null) は createElement("null") のように動作します。
+
options{{optional_inline}}
+
省略可能な ElementCreationOptions オブジェクトで、 is という名前のプロパティをひとつ持ち、その値は前に customElements.define() を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。
+
+ +

返値

+ +

新しい {{domxref("Element")}}。

+ +

例

+ +

基本的な例

+ +

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // 新しい div 要素を作成します
+  var newDiv = document.createElement("div");
+  // いくつかの内容を与えます
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // テキストノードを新規作成した div に追加します
+  newDiv.appendChild(newContent);
+
+  // DOM に新しく作られた要素とその内容を追加します
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

ウェブコンポーネントの例

+ +

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

+ +
// Create a class for the element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // constructor definition left out for brevity
+    ...
+  }
+}
+
+// Define the new element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

+ +
+

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.Document.createElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/window/customelements/index.html b/files/ja/web/api/window/customelements/index.html deleted file mode 100644 index 3477445e1e..0000000000 --- a/files/ja/web/api/window/customelements/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Window.customElements -slug: Web/API/Window/customElements -tags: - - API - - CustomElementRegistry - - Webコンポーネント - - Window - - custom elements - - customElements - - プロパティ - - リファレンス -translation_of: Web/API/Window/customElements ---- -
{{APIRef}}
- -

{{domxref("Window")}} インターフェイスの読み取り専用 customElements プロパティは、 新しいカスタムエレメントを登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。

- -

構文

- -
let customElementRegistry = window.customElements;
- -

戻り値

- -

{{domxref("CustomElementRegistry")}} オブジェクトは現在の window の カスタムエレメントレジストリ を表すインスタンスです。

- -

例

- -

このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために {{domxref("CustomElementRegistry.define()")}} メソッドにアクセスすることです, 例えば:

- -
let customElementRegistry = window.customElements;
-customElementRegistry.define('my-custom-element', MyCustomElement);
- -

しかし、通常は以下のように短縮されます:

- -
customElements.define('element-details',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      const template = document
-        .getElementById('element-details-template')
-        .content;
-      const shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(template.cloneNode(true));
-  }
-});
- -

我々の web-components-examples リポジトリにより多くの使用例がありますのでご参照ください。

- -

仕様

- - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}{{Spec2("HTML WHATWG")}}初期定義。
- -

ブラウザ互換性

- -
- - -

{{Compat("api.Window.customElements")}}

-
diff --git a/files/ja/web/api/window/customelements/index.md b/files/ja/web/api/window/customelements/index.md new file mode 100644 index 0000000000..3477445e1e --- /dev/null +++ b/files/ja/web/api/window/customelements/index.md @@ -0,0 +1,73 @@ +--- +title: Window.customElements +slug: Web/API/Window/customElements +tags: + - API + - CustomElementRegistry + - Webコンポーネント + - Window + - custom elements + - customElements + - プロパティ + - リファレンス +translation_of: Web/API/Window/customElements +--- +
{{APIRef}}
+ +

{{domxref("Window")}} インターフェイスの読み取り専用 customElements プロパティは、 新しいカスタムエレメントを登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。

+ +

構文

+ +
let customElementRegistry = window.customElements;
+ +

戻り値

+ +

{{domxref("CustomElementRegistry")}} オブジェクトは現在の window の カスタムエレメントレジストリ を表すインスタンスです。

+ +

例

+ +

このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために {{domxref("CustomElementRegistry.define()")}} メソッドにアクセスすることです, 例えば:

+ +
let customElementRegistry = window.customElements;
+customElementRegistry.define('my-custom-element', MyCustomElement);
+ +

しかし、通常は以下のように短縮されます:

+ +
customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+});
+ +

我々の web-components-examples リポジトリにより多くの使用例がありますのでご参照ください。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}{{Spec2("HTML WHATWG")}}初期定義。
+ +

ブラウザ互換性

+ +
+ + +

{{Compat("api.Window.customElements")}}

+
-- cgit v1.2.3-54-g00ecf