2021/12/24 時点の英語版に同期

1 files changed, 155 insertions, 177 deletions

diff --git a/files/ja/web/web_components/using_custom_elements/index.md b/files/ja/web/web_components/using_custom_elements/index.md
index 359593564c..769cca7a40 100644
--- a/files/ja/web/web_components/using_custom_elements/index.md
+++ b/files/ja/web/web_components/using_custom_elements/index.md
@@ -1,235 +1,227 @@
 ---
-title: Using custom elements
+title: カスタム要素の使用
 slug: Web/Web_Components/Using_custom_elements
 tags:
-  - Classes
-  - Guide
+  - クラス
+  - ガイド
   - HTML
-  - Web Components
+  - ウェブコンポーネント
   - autonomous
-  - custom elements
+  - カスタム要素
   - customized
 translation_of: Web/Web_Components/Using_custom_elements
 ---
-<div>{{DefaultAPISidebar("Web Components")}}</div>
+{{DefaultAPISidebar("Web Components")}}
 
-<p class="summary">Webコンポーネント標準の重要な特徴の一つはカスタム要素を作れることです。それはページの機能を提供する長くネストした要素のバッチではなく、HTMLページ上で機能をカプセル化します。<br>
- この記事はカスタム要素APIの使い方を紹介します。</p>
+ウェブコンポーネント標準の主な特徴の 1 つは、 HTML ページに機能をカプセル化するカスタム要素を作成できることで、カスタムページの機能を提供する要素の長いネストしたバッチを作成する必要がありません。この記事では、 Custom Elements API の使い方を紹介します。
 
-<div class="note">
-<p><strong>注</strong>: カスタム要素をデフォルトでサポートするのは Firefox, Chrome, と Edge (76)です。Opera と Safari は今のところ、自律カスタム要素のみサポートしています。</p>
-</div>
+## 高水準のビュー
 
-<h2 id="High-level_view" name="High-level_view">High-level view</h2>
+ウェブ文書上でカスタム要素を制御するのは {{domxref("CustomElementRegistry")}} オブジェクトです。 — このオブジェクトで、ページへカスタム要素を登録したり、どのようなカスタム要素が登録されているのかを返したりすることができます。
 
-<p>Webドキュメント上でカスタム要素をコントロールするのは {{domxref("CustomElementRegistry")}} オブジェクトです。 — このオブジェクトはページへのカスタム要素を登録したり、どんなカスタム要素が登録されているのかを返すなどの操作を行えます。</p>
+ページにカスタム要素を登録するには、 {{domxref("CustomElementRegistry.define()")}} メソッドを使います。引数に次のものを取ります。
 
-<p>ページにカスタム要素を登録するには,  {{domxref("CustomElementRegistry.define()")}} メソッドを使います。次の引数を取ることができます:</p>
+- 要素に与える名前を表す {{domxref("DOMString")}}。カスタム要素の名前は、[ダッシュが使われている名前](https://html.spec.whatwg.org/#valid-custom-element-name) (kebab-case) である必要があります。単一の単語にすることはできません。
+- 要素の振る舞いを定義した[クラス](/en-US/docs/Web/JavaScript/Reference/Classes)のオブジェクト。
+- {{optional_inline}} `extends` プロパティを含むオプションオブジェクトです。このプロパティは、もしあれば、要素が継承する組み込み要素を指定します（カスタマイズされた組み込み要素にのみ関係します）。
 
-<ul>
- <li>エレメントの名前を表す {{domxref("DOMString")}} 。 カスタム要素の名前には <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">ダッシュを使う必要があります。</a>; 一つの単語の名前をつけられません。</li>
- <li>要素の振る舞いを定義した <a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a> オブジェクト。</li>
- <li>オプションで, <code>extends</code>属性を含むオプションオブジェクト。組み込み要素をを継承する場合にはそれを指定します。</li>
-</ul>
-
-<p>例えば、次の様に <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">word-count 要素</a> を定義できます:</p>
+例えば、カスタムの [word-count 要素](https://mdn.github.io/web-components-examples/word-count-web-component/)を定義するには次のようにします。
 
-<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+```js
+customElements.define('word-count', WordCount, { extends: 'p' });
+```
 
-<p><code>word-count</code>要素は <code>WordCount</code>クラスのオブジェクトで {{htmlelement("p")}}要素を拡張します。</p>
+`word-count` 要素は `WordCount` クラスのオブジェクトで、 {{htmlelement("p")}} 要素を拡張します。
 
-<p>カスタム要素のクラスオブジェクトは ES 2015 のクラスシンタックスで実装します。例えば、<code>WordCount</code> 次の様になります:</p>
+カスタム要素のクラスのオブジェクトは ES 2015 のクラス構文で実装します。例えば、 `WordCount` は次のように構成します。
 
-<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+```js
+class WordCount extends HTMLParagraphElement {
   constructor() {
-    // Always call super first in constructor
+    // コンストラクターでは常に super を最初に呼び出してください
     super();
 
-    // Element functionality written in here
+    // ここに要素の機能を記述します
 
     ...
   }
-}</pre>
+}
+```
 
-<p>これはごく簡単な例ですが、ここでできることはもっとあります。クラスの中でライフサイクルコールバックを定義することができ、要素のライフサイクルの特定のポイントで実行されます。例えば、<code>connectedCallback</code> はドキュメント接続要素にカスタム要素が追加されるたびに実行されます。一方 <code>attributeChangedCallback</code> はカスタム要素に属性が追加、削除、変更される時に実行されます。</p>
+これはごく簡単な例ですが、ここでできることはもっとあります。クラスの中でライフサイクルコールバックを定義することができ、要素のライフサイクルの特定の時点で実行されます。例えば、`connectedCallback` はドキュメント接続要素にカスタム要素が追加されるたびに実行されます。一方 `attributeChangedCallback` はカスタム要素に属性が追加、削除、変更される時に実行されます。
 
-<p>{{anch("Using the lifecycle callbacks")}} でこれらについてもっと学ぶことができます。.</p>
+これらについては、下記の{{anch("ライフサイクルコールバックの使用")}}の節で詳しく学ぶことができます。
 
-<p>カスタム要素には2つのタイプがあります:</p>
+カスタム要素には 2 つの種類があります。
 
-<ul>
- <li>スタンドアロンの<strong>自律カスタム要素</strong> — 標準のHTML要素を継承していません。文字通りHTML要素としてページで使います。例えば、<code>&lt;popup-info&gt;</code> あるいは <code>document.createElement("popup-info")</code>の様に。</li>
- <li>基礎とするHTML要素を継承する<strong>カスタマイズされた組み込み要素</strong>。 これらを作るために、どの要素を拡張するのかを（上の例で示したように）指定します。そして、 基本要素を書き出して使いますが、 {{htmlattrxref("is")}}属性 (またはプロパティ)でカスタム要素の名前を指定します。. 例えば、<code>&lt;p is="word-count"&gt;<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> あるいは</span></font></code><code>document.createElement("p", { is: "word-count" })</code>の様に。</li>
-</ul>
+- スタンドアロンの**自律カスタム要素** — 標準の HTML 要素を継承しません。 HTML 要素としてページ内で記述して使います。例えば、`<popup-info>` あるいは `document.createElement("popup-info")` などです。
+- 基礎となる HTML 要素を継承する**カスタマイズされた組み込み要素**。これらを作成するには、どの要素を拡張するかを指定する必要があり（上記の例で示した通り）、基本要素を記述し、カスタム要素の名前を {{htmlattrxref("is")}} 属性（またはプロパティ）で指定することで使用します。されます。例えば、 `<p is="word-count">` や `document.createElement("p", { is: "word-count" })` のようにします。
 
-<h2 id="Working_through_some_simple_examples" name="Working_through_some_simple_examples">簡単な例と実践</h2>
+## 簡単な例での作業
 
-<p>ここで、どのようにカスタム要素をを作るのかを詳細に説明するために簡単な例を見てみましょう。</p>
+ここで、もう少し簡単な例で、カスタム要素の作成方法をより詳しく説明しましょう。
 
-<h3 id="Autonomous_custom_elements" name="Autonomous_custom_elements">自律カスタム要素</h3>
+### 自律カスタム要素
 
-<p>自律カスタム要素の例を見てみましょう — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> ( <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">実例</a>参照). これは画像とテキストを受け取り、ページにアイコンを埋め込みます。アイコンにフォーカスすると、ポップアップする情報ボックスにテキストを表示してコンテキスト内の情報を更に提供します。</p>
+自律カスタム要素の例を見てみましょう。[`<popup-info-box>`](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/)も参照) です。これは画像とテキストを受け取り、ページにアイコンを埋め込みます。アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
 
-<p>最初に{{domxref("HTMLElement")}}を継承して <code>PopUpInfo</code>,というクラスを定義します。 自律カスタム要素はほぼいつも <code>HTMLElement</code>を継承します。</p>
+最初に汎用的な {{domxref("HTMLElement")}} クラスを継承して `PopUpInfo` というクラスを定義する JavaScript ファイルです。
 
-<pre class="brush: js">class PopUpInfo extends HTMLElement {
+```js
+class PopUpInfo extends HTMLElement {
   constructor() {
-    // Always call super first in constructor
+    // コンストラクターでは常に super を最初に呼び出してください
     super();
 
-    // write element functionality in here
+    // ここに要素の機能を記述します
 
     ...
   }
-}</pre>
+}
+```
 
-<p>前述のコードスニペットはクラスの <code><a href="/ja/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> の定義を含んでおり、常に <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> を最初に呼び出します。これにより正しいプロタイプチェーンが確立されます。</p>
+前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/en-US/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しい正しいプロタイプチェーンが確立されるようにします。
 
-<p>コンストラクタ内で、インスタンス化された時に要素が持っているすべての機能を定義します。この例ではカスタム要素にshadowルートをアタッチしています。DOM操作を行い、要素内部の shadow DOM構造を作ります。—DOM構造はshadowルートにアタッチされます— そして最後にスタイルを適用するためにCSSをshadowルートにアタッチします。</p>
+コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。
 
-<pre class="brush: js">// Create a shadow root
-var shadow = this.attachShadow({mode: 'open'});
+```js
+// シャドウルートを生成
+this.attachShadow({mode: 'open'}); // 'this.shadowRoot' を設定して返す
 
-// Create spans
-var wrapper = document.createElement('span');
+// (内部の) span 要素を生成
+const wrapper = document.createElement('span');
 wrapper.setAttribute('class','wrapper');
-var icon = document.createElement('span');
+const icon = wrapper.appendChild(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);
+// アイコンを、定義された属性または既定のアイコンから挿入
+const img = icon.appendChild(document.createElement('img'));
+img.src = this.hasAttribute('src') ? this.getAttribute('src') : 'img/default.png';
 
-// Create some CSS to apply to the shadow dom
-var style = document.createElement('style');
+const info = wrapper.appendChild(document.createElement('span'));
+info.setAttribute('class','info');
+// 属性の中身を取得し、 info の span の中に入れる
+info.textContent = this.getAttribute('data-text');
 
+// CSS を作成しシャドウ DOM に割り当てる
+const style = document.createElement('style');
 style.textContent = '.wrapper {' +
-// CSS truncated for brevity
+// 簡略化のために CSS は省略
 
-// attach the created elements to the shadow dom
-
-shadow.appendChild(style);
-shadow.appendChild(wrapper);
-wrapper.appendChild(icon);
-wrapper.appendChild(info);</pre>
+// 生成された要素をシャドウ DOM に添付する
+this.shadowRoot.append(style,wrapper);
+```
 
-<p>最後に、カスタム要素を <code>CustomElementRegistry</code> に登録します。前述の <code>define()</code> を使用して、パラメーターで要素名とその機能を定義するクラス名を指定します:</p>
+最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。
 
-<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+```js
+customElements.define('popup-info', PopUpInfo);
+```
 
-<p>これによってページで使えるようになりました。HTML中で下記のように使用することができます。</p>
+これによって要素がページで使えるようになりました。 HTML 中で下記のように使用することができます。
 
-<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+```html
+<popup-info img="img/alt.png" data-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."&gt;&lt;/popup-info&gt;</pre>
+  back of your card."></popup-info>
+```
 
-<div class="note">
-<p><strong>注</strong>: こちらで <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">完全なソースコード</a> を見ることができます。</p>
-</div>
+> **Note:** こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js) を見ることができます。
 
-<div class="blockIndicator note">
-<p><strong>注</strong>: カスタム要素が機能するためには、DOMの解析を終えた後にカスタム要素を登録するスクリプトが読み込まれる必要があることに注意してください。これは <code>&lt;script&gt;</code> 要素を <code>&lt;body&gt;</code> 要素内の最下部に配置する、または <code>&lt;script&gt;</code> 要素に <code>defer</code> 属性を加えることで解決します。</p>
-</div>
+### 内部スタイルと外部スタイル
 
-<h3 id="Customized_built-in_elements" name="Customized_built-in_elements">内部スタイル 対 外部スタイル</h3>
+上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
 
-<p>上記の例では {{htmlelement("style")}} 要素を用いてShadow DOMにスタイルを適用しました。しかし、{{htmlelement("link")}} 要素から外部のスタイルシートを参照することも可能です。</p>
+例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js)はこちら）。
 
-<p>例えば、<a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> のコードを少し見てみましょう（<a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">ソースコード</a>）。</p>
-
-<pre class="brush: js">// Apply external styles to the shadow dom
+```js
+// 外部スタイルシートをシャドウ DOM に適用
 const linkElem = document.createElement('link');
 linkElem.setAttribute('rel', 'stylesheet');
 linkElem.setAttribute('href', 'style.css');
 
-// Attach the created element to the shadow dom
+// 生成された要素をシャドウ DOM に添付
 shadow.appendChild(linkElem);
-</pre>
+```
+
+なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
 
-<p>この手法が特に大規模なスタイルシートで推奨されます。これによって、綺麗で、より共有しやすい効率の良いコードになります。</p>
+最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
 
-<h3 id="Customized_built-in_elements" name="Customized_built-in_elements">カスタマイズされたビルトイン要素</h3>
+### カスタマイズされた組み込み要素
 
-<p>ここで、もう1つのビルトイン要素の例を見てみましょう — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">デモはこちら</a>) 。 これにより番号なしリストが展開・縮小するメニューになります。<br>
- <br>
- まず始めに、これまでと同様の規則でクラス要素を定義します。</p>
+ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component) ([ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)) です。 これにより番号なしリストが展開・縮小するメニューになります。
 
-<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+ まず始めに、これまでと同様の方法でクラス要素を定義します。
+
+```js
+class ExpandingList extends HTMLUListElement {
   constructor() {
-    // Always call super first in constructor
+    // コンストラクターでは常に super を最初に呼び出してください
     super();
 
-    // write element functionality in here
+    // ここに要素の機能を記述します
 
     ...
   }
-}</pre>
+}
+```
 
-<p>ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのかチェックすることができます。これまでと唯一違う点は {{domxref("HTMLElement")}} ではなく、 {{domxref("HTMLUListElement")}} インターフェースを拡張していることです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、私たちが定義した機能を持っています。これこそが自律カスタム要素ではなくカスタマイズされたビルトイン要素である理由です。<br>
- <br>
- 次に、以前と同様に <code>define()</code> を用いて要素を登録するのですが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。</p>
+ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。
 
-<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+ 次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。
 
-<p>Webドキュメント内でビルトイン要素を使用する場合とはやや異なります。</p>
+```js
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+```
 
-<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+ウェブ文書内で組み込み要素を使用する場合とはやや異なります。
+
+```html
+<ul is="expanding-list">
 
   ...
 
-&lt;/ul&gt;</pre>
+</ul>
+```
+
+通常のように `<ul>` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。
 
-<p>通常のように <code>&lt;ul&gt;</code> を使用していますが、カスタム要素の名前が <code>is</code> 属性で指定されています。</p>
+> **Note:** 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js)はこちらにあります。
 
-<div class="note">
-<p><strong>注</strong>: もう一度述べますが、こちらで <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">完全なソースコード</a> を見ることができます。</p>
-</div>
+## ライフサイクルコールバックの使用
 
-<h2 id="Using_the_lifecycle_callbacks" name="Using_the_lifecycle_callbacks">ライフサイクルコールバックの使用</h2>
+カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。
 
-<p>カスタム要素のクラス定義内にいくつかの異なるコールバックを定義できます。これらのコールバックは、要素のライフサイクルのさまざまな時点で起動します。</p>
+- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。
 
-<ul>
- <li><code>connectedCallback</code>: カスタム要素がドキュメントに接続された要素に追加されるたびに呼び出されます。これは、ノードが移動されるたびに発生し、要素のコンテンツが完全に解析される前に発生する場合があります。
-  <div class="note">
-  <p><strong>注</strong>: エレメントが接続されなくなったら<code>connectedCallback</code> を呼び出すことができます,  {{domxref("Node.isConnected")}} を使用して確認してください.</p>
-  </div>
- </li>
- <li><code>disconnectedCallback</code>: カスタム要素がドキュメントのDOMから切断されるたびに呼び出されます。</li>
- <li><code>adoptedCallback</code>: カスタム要素が新しいドキュメントに移動するたびに呼び出されます。</li>
- <li><code>attributeChangedCallback</code>: カスタム要素の属性の1つが追加、削除、または変更されるたびに呼び出されます。変更を通知する属性は、 <code>static get observedAttributes()</code> メソッドで指定されます</li>
-</ul>
+  > **Note:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。
 
-<p>使用中のこれらの例を見てみましょう。以下のコードは、<a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">ライフサイクルコールバック</a>の例から取ったものです（<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">ライブ実行を参照</a>）。これは、ページ上に固定サイズの色付きの正方形を生成する単純な例です。カスタム要素は次のようになります。</p>
+- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。
+- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。
+- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、 static get `observedAttributes()` メソッドで指定されます。
 
-<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+これらの使用例を見てみましょう。以下のコードは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) の例から引用しています ([実行可能なライブでも確認してください](https://mdn.github.io/web-components-examples/life-cycle-callbacks/))。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。
 
-<p>クラスコンストラクターは非常に単純です。ここでは、要素にシャドウDOMをアタッチし、空の{{htmlelement("div")}} および{{htmlelement("style")}} 要素をシャドウルートにアタッチします:</p>
+```html
+<custom-square l="100" c="red"></custom-square>
+```
 
-<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
 
-var div = document.createElement('div');
-var style = document.createElement('style');
+```js
+const shadow = this.attachShadow({mode: 'open'});
+
+const div = document.createElement('div');
+const style = document.createElement('style');
 shadow.appendChild(style);
-shadow.appendChild(div);</pre>
+shadow.appendChild(div);
+```
 
-<p>この例の主要な機能は<code>updateStyle（）</code>です。これは要素を取得し、シャドウルートを取得し、その<code>&lt;style&gt;</code>要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, および{{cssxref("background-color")}} をスタイルに追加します。</p>
+この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `<style>` 要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, および{{cssxref("background-color")}} をそのスタイルに追加します。
 
-<pre class="brush: js">function updateStyle(elem) {
+```js
+function updateStyle(elem) {
   const shadow = elem.shadowRoot;
   shadow.querySelector('style').textContent = `
     div {
@@ -238,67 +230,53 @@ shadow.appendChild(div);</pre>
       background-color: ${elem.getAttribute('c')};
     }
   `;
-}</pre>
+}
+```
 
-<p>実際の更新はすべて、メソッドとしてクラス定義内に配置されるライフサイクルコールバックによって処理されます。 <code>connectedCallback（）</code>は、要素がDOMに追加されるたびに実行されます。ここでは、<code>updateStyle（）</code>関数を実行して、正方形がその属性で定義されたスタイルになっていることを確認します。</p>
+実際の更新はすべて、メソッドとしてクラス定義内に配置されているライフサイクルコールバックによって処理されます。 `connectedCallback()` は、要素が DOM に追加されるたびに実行されます。ここでは、 `updateStyle()` 関数を実行して、正方形がその属性で定義されたスタイルになっていることを確認します。
 
-<pre class="brush: js">connectedCallback() {
+```js
+connectedCallback() {
   console.log('Custom square element added to page.');
   updateStyle(this);
-}</pre>
+}
+```
 
-<p><code>disconnectCallback（）</code>および<code>adoptedCallback()</code> コールバックは、要素がDOMから削除されるか、別のページに移動されたときに通知する単純なメッセージをコンソールに記録します。</p>
+`disconnectedCallback()` および `adoptedCallback()` コールバックは、要素が DOM から削除されるか、別のページに移動されたときに通知する単純なメッセージをコンソールに記録します。
 
-<pre class="brush: js">disconnectedCallback() {
+```js
+disconnectedCallback() {
   console.log('Custom square element removed from page.');
 }
 
 adoptedCallback() {
   console.log('Custom square element moved to new page.');
-}</pre>
+}
+```
 
-<p><code>attributeChangedCallback（）</code>コールバックは、要素の属性の1つが何らかの方法で変更されるたびに実行されます。そのプロパティからわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、<code>updateStyle（）</code>関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。</p>
+`attributeChangedCallback()` コールバックは、要素の属性の 1 つが何らかの方法で変更されるたびに実行されます。そのプロパティからわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、 `updateStyle()` 関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。
 
-<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+```js
+attributeChangedCallback(name, oldValue, newValue) {
   console.log('Custom square element attributes changed.');
   updateStyle(this);
-}</pre>
-
-<p>属性が変更されたときに起動する<code>attributeChangedCallback（）</code>コールバックを取得するには、属性を監視する必要があることに注意してください。これは、カスタム要素クラス内で<code>static get observedAttributes()</code>メソッドを指定することによって行われます-これは、監視したい属性の名前を含む配列を返します:</p>
-
-<pre class="brush: js">static get observedAttributes() { return ['c', 'l']; }</pre>
-
-<p>この例では、これはコンストラクターの最上部に配置されています。</p>
-
-<div class="note">
-<p><strong>注</strong>: ここで<a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">完全なJavaScriptソース</a>を検索してください。</p>
-</div>
-
-<h2 id="Polyfills_versus_classes" name="Polyfills_versus_classes">ポリフィル 対 クラス</h2>
+}
+```
 
-<p>カスタム要素のポリフィルは <code>HTMLElement</code> などのネイティブのコンストラクタに対してパッチを当てることで、単にネイティブのコンストラクタが作成したものとは異なるインスタンスを返すことがあります。<br>
- <br>
- もし <code>constructor</code> や強制的に <code>super</code> を呼び出す必要があるなら、任意の引数を渡して <code>super</code> を呼び出した結果を返すことを忘れないでください。</p>
+ある属性が変更されたときに起動する `attributeChangedCallback()` コールバックを取得するには、その属性を監視する必要があることに注意してください。これは、カスタム要素クラス内で `static get observedAttributes()` メソッドを定義することによって行われます。これは、監視したい属性の名前を含む配列を返すようにしてください。
 
-<pre class="brush: js">class CustomElement extends HTMLElement {
-  constructor(...args) {
-    const self = super(...args);
-    // self functionality written in here
-    // self.addEventListener(...)
-    // return the right context
-    return self;
-  }
-}</pre>
+```js
+static get observedAttributes() { return ['c', 'l']; }
+```
 
-<p>もしコンストラクタ内で何も処理が必要ないならば、単に省略することでネイティブの挙動を維持できます。</p>
+この例では、これはコンストラクターの最上部に配置されています。
 
-<pre class="brush: js"> constructor(...args) { return super(...args); }
-</pre>
+> **Note:** [完全な JavaScript のソース](https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js)はこちらから探してください。
 
-<h2 id="Transpilers_versus_classes" name="Transpilers_versus_classes">トランスパイラ 対 クラス</h2>
+## トランスパイラーとクラス
 
-<p>レガシーなブラウザをターゲットとしたBabel 6またはTypeScriptでは、ES2015のクラス構文は期待通りにトランスパイルされない可能性があることに注意してください。Babel 7もしくはBabel 6の <a href="https://www.npmjs.com/package/babel-plugin-transform-builtin-classes">babel-plugin-transform-builtin-classes</a>を使用して、レガシーなブラウザではなくくTypeScriptでES2015をターゲットとすることができます。</p>
+古いブラウザーを対象とした Babel 6 や TypeScript では、 ES2015 のクラス構文は期待通りにトランスパイルされない可能性があることに注意してください。 Babel 7 もしくは Babel 6 の [babel-plugin-transform-builtin-classes](https://www.npmjs.com/package/babel-plugin-transform-builtin-classes) を使用すると、 TypeScript で古いブラウザーではなく ES2015 をターゲットとすることができます。
 
-<h2 id="Libraries" name="Libraries">ライブラリ</h2>
+## ライブラリー
 
-<p>カスタム要素を作る際に抽象度を高めることを目的とした、Web Componentsで実装されたライブラリがあります。その内のいくつかを挙げます。<a href="https://github.com/devpunks/snuggsi" rel="nofollow">snuggsi</a>、<a href="https://x-tag.github.io/" rel="nofollow">X-Tag</a>、<a href="http://slimjs.com/" rel="nofollow">Slim.js</a>、<a href="https://lit-element.polymer-project.org/">LitElement</a>、<a href="https://www.htmlelements.com/">Smart</a>、<a href="https://stenciljs.com">Stencil</a>。</p>
+カスタム要素を作る際に抽象度を高めることを目的とした、ウェブコンポーネントで実装されたライブラリーがあります。これらのライブラリーには、 [FASTElement](https://www.fast.design/docs/fast-element/getting-started), [snuggsi](https://github.com/devpunks/snuggsi), [X-Tag](https://x-tag.github.io/), [Slim.js](https://slimjs.com/), [Lit](https://lit.dev/), [Smart](https://www.htmlelements.com/), [Stencil](https://stenciljs.com), [hyperHTML-Element](https://github.com/WebReflection/hyperHTML-Element), [DataFormsJS](https://www.dataformsjs.com/), [Custom-Element-Builder](https://tmorin.github.io/ceb/) などがあります。