From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/customelementregistry/define/index.html | 229 +++++++++++++++++++++ files/ja/web/api/customelementregistry/index.html | 101 +++++++++ .../customelementregistry/whendefined/index.html | 108 ++++++++++ 3 files changed, 438 insertions(+) create mode 100644 files/ja/web/api/customelementregistry/define/index.html create mode 100644 files/ja/web/api/customelementregistry/index.html create mode 100644 files/ja/web/api/customelementregistry/whendefined/index.html (limited to 'files/ja/web/api/customelementregistry') diff --git a/files/ja/web/api/customelementregistry/define/index.html b/files/ja/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..47c9718674 --- /dev/null +++ b/files/ja/web/api/customelementregistry/define/index.html @@ -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 new file mode 100644 index 0000000000..79c8a11eca --- /dev/null +++ b/files/ja/web/api/customelementregistry/index.html @@ -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 new file mode 100644 index 0000000000..668e82e82b --- /dev/null +++ b/files/ja/web/api/customelementregistry/whendefined/index.html @@ -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