From fe5267a242fed404351afb161b3d9ba625510880 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 17 Jan 2022 21:39:23 +0900 Subject: 2021/10/16 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/customelementregistry/define/index.md | 232 ++++++++++----------- 1 file changed, 113 insertions(+), 119 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/customelementregistry/define/index.md b/files/ja/web/api/customelementregistry/define/index.md index 47c9718674..8e3ea16405 100644 --- a/files/ja/web/api/customelementregistry/define/index.md +++ b/files/ja/web/api/customelementregistry/define/index.md @@ -1,88 +1,77 @@ --- title: CustomElementRegistry.define() slug: Web/API/CustomElementRegistry/define +tags: + - API + - CustomElementRegistry + - メソッド + - リファレンス + - ウェブコンポーネント + - カスタム要素 + - define +browser-compat: 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
+{{APIRef("CustomElementRegistry")}}
+
+**`define()`** は {{domxref("CustomElementRegistry")}} インターフェイスのメソッドで、新しいカスタム要素を定義します。
+
+作成することができるのは、次の 2 種類のカスタム要素です。
+
+- **自律カスタム要素** (Autonomous custom element): 独立した要素です。組み込みの HTML 要素を継承していません。
+- **カスタム組み込み要素** (Customized built-in element): 組み込みの HTML 要素を継承し、拡張した要素です。
+
+## 構文
+
+```js
+customElements.define(name, constructor, options);
+```
+
+### 引数
+
+- name
+  - : 新しいカスタム要素の名前です。カスタム要素の名前は、少なくとも 1 つのハイフンを含まなければならないことに注意してください。
+- constructor
+  - : 新しいカスタム要素のコンストラクターです。
+- options {{optional_inline}}
+
+  - : 要素の定義の仕方を制御するオブジェクト。現在は、次の 1 つのオプションのみに対応しています。
+
+ - `extends`: 拡張する組み込み要素の名前を示す文字列。*カスタム組み込み要素*を作成するのに使われる。
+
+### 返値
+
+なし。
+
+### 例外
+
+- `NotSupportedError` {{domxref("DOMException")}}
+  - : {{domxref("CustomElementRegistry")}} に既に同じ名前の項目または同じコンストラクターが含まれている（または既に定義されている）、または extends で[有効なカスタム要素名](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)が指定されていた場合、または extends で未知の要素を拡張しようとした場合に発生します。
+- `SyntaxError` {{domxref("DOMException")}}
+  - : 指定された名前が[有効なカスタム要素名](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)ではなかった場合に発生します。
+- `TypeError` {{domxref("DOMException")}}
+  - : 参照されたコンストラクターがコンストラクターではなかった場合に発生します。
+
+> **Note:** `NotSupportedError` 例外が多く発生する場合、 `define()` が失敗しているように思えるかもしれませんが、多くの場合は {{domxref("Element.attachShadow()")}} に問題があります。
+
+## 例
+
+### 自律カスタム要素
+
+以下のコードは [popup-info-box-web-component](https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component)
+の例から取ったものです ([ライブでもご覧ください](https://mdn.github.io/web-components-examples/popup-info-box-web-component/))。
+
+```js
+// 要素のクラスを作成
 class PopUpInfo extends HTMLElement {
   constructor() {
-    // Always call super first in constructor
+    // コンストラクターでは常に super を最初に呼び出す
     super();
 
-    // Create a shadow root
+    // シャドウルートを生成
     var shadow = this.attachShadow({mode: 'open'});
 
-    // Create spans
+    // span を生成
     var wrapper = document.createElement('span');
     wrapper.setAttribute('class','wrapper');
     var icon = document.createElement('span');
@@ -91,11 +80,11 @@ class PopUpInfo extends HTMLElement {
     var info = document.createElement('span');
     info.setAttribute('class','info');
 
-    // Take attribute content and put it inside the info span
+    // 属性の中身を取り出し、 info の span の中に入れる
     var text = this.getAttribute('text');
     info.textContent = text;
 
-    // Insert icon
+    // アイコンを挿入
     var imgUrl;
     if(this.hasAttribute('img')) {
       imgUrl = this.getAttribute('img');
@@ -106,7 +95,7 @@ class PopUpInfo extends HTMLElement {
     img.src = imgUrl;
     icon.appendChild(img);
 
-    // Create some CSS to apply to the shadow dom
+    // いくらかの CSS を生成してシャドウ DOM に適用
     var style = document.createElement('style');
 
     style.textContent = '.wrapper {' +
@@ -137,7 +126,7 @@ class PopUpInfo extends HTMLElement {
                             'opacity: 1;' +
                           '}';
 
-    // attach the created elements to the shadow dom
+    // 生成された要素をシャドウ DOM に取り付ける
 
     shadow.appendChild(style);
     shadow.appendChild(wrapper);
@@ -146,29 +135,31 @@ class PopUpInfo extends HTMLElement {
   }
 }
 
-// Define the new element
+// 新しい要素を定義
 customElements.define('popup-info', PopUpInfo);
-
+``` -
<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
+```html
+
+                                    numbers on the back of your card.">
+```
 
-

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

-

+> **Note:** 自律カスタム要素のコンストラクターは {{domxref("HTMLElement")}} を継承していなければなりません。
 
-
カスタムビルトインエレメント

+### カスタム組み込み要素
 
-
The following code is taken from our word-count-web-component example (see it live also).

+以下のコードは [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/))。
 
-
// Create a class for the element
+```js
+// 要素のクラスを作成
 class WordCount extends HTMLParagraphElement {
   constructor() {
-    // Always call super first in constructor
+    // コンストラクターでは常に super を最初に呼び出す
     super();
 
-    // count words in element's parent element
+    // 要素の親要素の語数を数える
     var wcParent = this.parentNode;
 
     function countWords(node){
@@ -176,54 +167,57 @@ class WordCount extends HTMLParagraphElement {
       return text.split(/\s+/g).length;
     }
 
-    var count = 'Words: ' + countWords(wcParent);
+    var count = '語数: ' + 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);
+      var count = '語数: ' + countWords(wcParent);
       text.textContent = count;
     }, 200)
 
   }
 }
 
-// Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });

+// 新しい要素を定義
+customElements.define('word-count', WordCount, { extends: 'p' });
+```
+
+```html
+

+```
+
+### シャドウルートを取り付けられないようにする要素の作成
+
+要素に使用されているクラスが、文字列 \`shadow\` を返す静的プロパティ `disabledFeatures` を含んでいる場合、 {{domxref("Element.attachShadow()")}} は {{domxref("DOMException")}} の `NotSupportedError` を返すようになります。
 
-
<p is="word-count"></p>

+```js
+class PopUpInfo extends HTMLElement {
+  static get disabledFeatures() { return ['shadow']; }
+
+  constructor() {
+    super();
 
-
仕様

+    var shadow = this.attachShadow({mode: 'open'});
+    // これは要素が定義されたときにエラーが発生するようになります。
+  }
+}
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.

+```
 
-
ブラウザ互換性

+## 仕様書
 
-

+{{Specifications}}
 
+## ブラウザーの互換性
 
-
{{Compat("api.CustomElementRegistry.define")}}

-

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