2023/07/07 時点の英語版に同期

mdn · Aug 1, 2023 · c686c07 · c686c07
1 parent eca809d
commit c686c07
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 38 deletions.
diff --git a/files/ja/web/api/event/composed/index.md b/files/ja/web/api/event/composed/index.md
@@ -1,6 +1,9 @@
 ---
-title: Event.composed
+title: "Event: composed プロパティ"
+short-title: composed
 slug: Web/API/Event/composed
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Shadow DOM")}}
@@ -24,38 +27,40 @@ UA から送られるすべての UI イベントは合成されます（クリ
 2 つの定義は次のようになります。
 
 ```js
-customElements.define('open-shadow',
+customElements.define(
+  "open-shadow",
   class extends HTMLElement {
     constructor() {
       super();
 
-      const pElem = document.createElement('p');
-      pElem.textContent = this.getAttribute('text');
+      const pElem = document.createElement("p");
+      pElem.textContent = this.getAttribute("text");
 
       const shadowRoot = this.attachShadow({
-        mode: 'open'
+        mode: "open",
       });
 
       shadowRoot.appendChild(pElem);
     }
-  }
+  },
 );
 
-customElements.define('closed-shadow',
+customElements.define(
+  "closed-shadow",
   class extends HTMLElement {
     constructor() {
       super();
 
-      const pElem = document.createElement('p');
-      pElem.textContent = this.getAttribute('text');
+      const pElem = document.createElement("p");
+      pElem.textContent = this.getAttribute("text");
 
       const shadowRoot = this.attachShadow({
-        mode: 'closed'
+        mode: "closed",
       });
 
       shadowRoot.appendChild(pElem);
     }
-  }
+  },
 );
 ```
 
@@ -69,7 +74,7 @@ customElements.define('closed-shadow',
 それから click イベントリスナーを `<html>` 要素に設定します。
 
 ```js
-document.querySelector('html').addEventListener('click', function(e) {
+document.querySelector("html").addEventListener("click", (e) => {
   console.log(e.composed);
   console.log(e.composedPath());
 });

diff --git a/files/ja/web/api/event/composedpath/index.md b/files/ja/web/api/event/composedpath/index.md
@@ -1,6 +1,9 @@
 ---
-title: Event.composedPath()
+title: "Event: composedPath() メソッド"
+short-title: composedPath()
 slug: Web/API/Event/composedPath
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef("Shadow DOM")}}
@@ -9,8 +12,8 @@ slug: Web/API/Event/composedPath
 
 ## 構文
 
-```js
-var composed = Event.composedPath();
+```js-nolint
+const composed = Event.composedPath()
 ```
 
 ### 引数
@@ -23,35 +26,37 @@ var composed = Event.composedPath();
 
 ## 例
 
-次の例は、 [https://mdn.github.io/web-components-examples/composed-composed-path/](https://mdn.github.io/web-components-examples/composed-composed-path/) を試すもので、 `<open-shadow>` と `<closed-shadow>` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `<p>` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。
+次の例は、 [https://mdn.github.io/web-components-examples/composed-composed-path/](https://mdn.github.io/web-components-examples/composed-composed-path/) を試すもので、`<open-shadow>` と `<closed-shadow>` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `<p>` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。
 
 ```js
-customElements.define('open-shadow',
+customElements.define(
+  "open-shadow",
   class extends HTMLElement {
     constructor() {
       super();
 
-      const pElem = document.createElement('p');
-      pElem.textContent = this.getAttribute('text');
+      const pElem = document.createElement("p");
+      pElem.textContent = this.getAttribute("text");
 
-      const shadowRoot = this.attachShadow({mode: 'open'});
+      const shadowRoot = this.attachShadow({ mode: "open" });
       shadowRoot.appendChild(pElem);
     }
-  }
+  },
 );
 
-customElements.define('closed-shadow',
+customElements.define(
+  "closed-shadow",
   class extends HTMLElement {
     constructor() {
       super();
 
-      const pElem = document.createElement('p');
-      pElem.textContent = this.getAttribute('text');
+      const pElem = document.createElement("p");
+      pElem.textContent = this.getAttribute("text");
 
-      const shadowRoot = this.attachShadow({mode: 'closed'});
+      const shadowRoot = this.attachShadow({ mode: "closed" });
       shadowRoot.appendChild(pElem);
     }
-  }
+  },
 );
 ```
 
@@ -65,23 +70,23 @@ customElements.define('closed-shadow',
 それから click イベントリスナーを `<html>` 要素に設定します。
 
 ```js
-document.querySelector('html').addEventListener('click',function(e) {
+document.querySelector("html").addEventListener("click", (e) => {
   console.log(e.composed);
   console.log(e.composedPath());
 });
 ```
 
-まず `<open-shadow>` 要素をクリックし、次に `<closed-shadow>` 要素をクリックすると、 2 つのことに気がつきます。第 1 に、 `click` イベントは常にシャドウの境界を越えて伝搬することができるため、 `composed` プロパティは `true` を返します。第 2 に、 2 つの要素の `composedPath` の値に違いがあります。
+まず `<open-shadow>` 要素をクリックし、次に `<closed-shadow>` 要素をクリックすると、 2 つのことに気がつきます。第 1 に、`click` イベントは常にシャドウの境界を越えて伝搬することができるため、`composed` プロパティは `true` を返します。第 2 に、 2 つの要素の `composedPath` の値に違いがあります。
 
 `<open-shadow>` 要素の合成パスは次の通りです。
 
-```js
+```plain
 Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
 ```
 
 それに対して `<closed-shadow>` 要素の合成パスは次の通りです。
 
-```js
+```plain
 Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
 ```
 

diff --git a/files/ja/web/api/event/initevent/index.md b/files/ja/web/api/event/initevent/index.md
@@ -1,6 +1,9 @@
 ---
-title: Event.initEvent()
+title: "Event: initEvent() メソッド"
+short-title: initEvent()
 slug: Web/API/Event/initEvent
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{ ApiRef("DOM") }}{{deprecated_header}}
@@ -16,8 +19,8 @@ slug: Web/API/Event/initEvent
 
 ## 構文
 
-```js
-event.initEvent(type, bubbles, cancelable);
+```js-nolint
+event.initEvent(type, bubbles, cancelable)
 ```
 
 ### 引数
@@ -37,16 +40,20 @@ event.initEvent(type, bubbles, cancelable);
 
 ```js
 // イベントを作成
-const event = document.createEvent('Event');
+const event = document.createEvent("Event");
 
 // バブルアップしキャンセルできないクリックイベントを
 // 作成
-event.initEvent('click', true, false);
+event.initEvent("click", true, false);
 
 // イベントを待ち受けする
-elem.addEventListener('click', function (e) {
-  // e.target matches elem
-}, false);
+elem.addEventListener(
+  "click",
+  (e) => {
+    // e.target が elem と一致
+  },
+  false,
+);
 
 elem.dispatchEvent(event);
 ```