A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/Event/composedPath below:

Event: composedPath() メソッド - Web API

次の例は、 https://mdn.github.io/web-components-examples/composed-composed-path/ を試すもので、<open-shadow> と <closed-shadow> という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を <p> 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ open と closed に設定された状態で取り付けられることです。

customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(pElem);
    }
  },
);

customElements.define(
  "closed-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      const shadowRoot = this.attachShadow({ mode: "closed" });
      shadowRoot.appendChild(pElem);
    }
  },
);

それからそれぞれの要素を 1 つずつをページに挿入します。

<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>

それから click イベントリスナーを <html> 要素に設定します。

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> 要素の合成パスは次の通りです。

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

それに対して <closed-shadow> 要素の合成パスは次の通りです。

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]

2 番目の場合、イベントリスナーは <closed-shadow> 要素自身までしか伝搬せず、シャドウ境界の内側のノードには伝搬しません。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4