From a646f693cf2f8ff75271e255830fe354992be156 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 Jan 2022 20:07:03 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/customelementregistry/index.md | 87 ++++++++++--------------- 1 file changed, 34 insertions(+), 53 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/customelementregistry/index.md b/files/ja/web/api/customelementregistry/index.md index e127680a70..5cb8ed3e69 100644 --- a/files/ja/web/api/customelementregistry/index.md +++ b/files/ja/web/api/customelementregistry/index.md @@ -4,41 +4,41 @@ slug: Web/API/CustomElementRegistry tags: - API - CustomElementRegistry - - Experimental - - Interface - - Landing - - Webコンポーネント - - custom elements - - レファレンス - - 試験的 + - 実験的 + - インターフェイス + - リファレンス + - ウェブコンポーネント + - カスタム要素 +browser-compat: api.CustomElementRegistry translation_of: Web/API/CustomElementRegistry --- -

{{DefaultAPISidebar("Web Components")}}

+{{DefaultAPISidebar("Web Components")}} -

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

+**`CustomElementRegistry`** インターフェイスは、カスタム要素の登録と、登録された要素を照会するためのメソッドを提供します。このインスタンスを取得するには、{{domxref("window.customElements")}} プロパティを使用してください。 -

メソッド

+## メソッド -
-
{{domxref("CustomElementRegistry.define()")}}
-
新しいカスタムエレメントを定義。
-
{{domxref("CustomElementRegistry.get()")}}
-
指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメントが定義されていない場合は undefined を返す。
-
{{domxref("CustomElementRegistry.whenDefined()")}}
-
名前を与えられたカスタムエレメントが定義されたとき、空の {{jsxref("Promise", "promise")}}（resolves）を返す。もしそのようなカスタムエレメントが既に定義されていた場合、返された promise は即座に fulfill状態になります。
-
+- {{domxref("CustomElementRegistry.define()")}} + - : 新しい[カスタム要素](/ja/docs/Web/Web_Components/Using_custom_elements)を定義します。 +- {{domxref("CustomElementRegistry.get()")}} + - : 名前付きカスタム要素のコンストラクターを返します。カスタム要素が定義されていない場合は {{jsxref("undefined")}} を返します。 +- {{domxref("CustomElementRegistry.upgrade()")}} + - : シャドウルートに接続する前であっても、直接カスタム要素をアップグレードします。 +- {{domxref("CustomElementRegistry.whenDefined()")}} + - : 指定された名前でカスタム要素が定義されたときに解決する空の{{jsxref("Promise", "プロミス", "", 1)}}を返します。そのようなカスタム要素が既に定義されていた場合、返されたプロミスは即座に履行状態になります。 -

例

+## 例 -

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

+以下のコードは [word-count-web-component](https://github.com/mdn/web-components-examples/tree/master/word-count-web-component) という例 ([ライブデモも見てください](https://mdn.github.io/web-components-examples/word-count-web-component/)) から持ってきています。カスタム要素のクラスを作成した後に、 {{domxref("CustomElementRegistry.define()")}} メソッドを使用してカスタム要素を定義していることに注意してください。 -
// 要素のクラスを生成
+```js
+// 要素のクラスを作成
 class WordCount extends HTMLParagraphElement {
   constructor() {
-    // コンストラクタ内ではまずはじめに必ず super をコールする
+    // コンストラクターでは常に super を最初に呼び出してください
     super();
 
-    // 親要素の要素内の count というワード
+    // 要素の親要素の語数を数える
     var wcParent = this.parentNode;
 
     function countWords(node){
@@ -48,18 +48,17 @@ class WordCount extends HTMLParagraphElement {
 
     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;
@@ -69,33 +68,15 @@ class WordCount extends HTMLParagraphElement {
 }
 
 // 新しい要素を定義
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
-

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

-
- -

仕様

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

ブラウザ互換性

+customElements.define('word-count', WordCount, { extends: 'p' }); +``` +> **Note:** CustomElementsRegistry は {{domxref("Window.customElements")}} プロパティを通して利用可能です。 +## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

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

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