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 +++++++++++++++++++++ 2 files changed, 229 insertions(+), 229 deletions(-) delete mode 100644 files/ja/web/api/customelementregistry/define/index.html create mode 100644 files/ja/web/api/customelementregistry/define/index.md (limited to 'files/ja/web/api/customelementregistry/define') 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")}}

+
-- cgit v1.2.3-54-g00ecf