事件：composed 属性

基线 广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2020 年 1 月.

注意：此功能在Web Workers 中可用。

Event 接口的只读composed 属性返回一个布尔值，该值指示事件是否会跨越 Shadow DOM 边界传播到标准 DOM。

所有 UA 分派的 UI 事件都是组合的（click/touch/mouseover/copy/paste 等）。大多数其他类型的事件不是组合的，因此将返回false。例如，这包括在未将其composed 选项设置为true的情况下创建的合成事件。

仅当bubbles 属性也为true时才会发生传播。但是，捕获仅组合事件也会在主机上处理，就好像它们处于AT_TARGET 阶段一样。您可以通过调用composedPath() 来确定事件将通过 Shadow Root 传播到 DOM 根的路径。

值

如果事件将在到达 Shadow Root 后从 Shadow DOM 传播到标准 DOM，则为true 的布尔值。（即，事件开始传播的 Shadow DOM 中的第一个节点。）

如果此值为false，则 Shadow Root 将是最后一个提供事件的节点。

示例

在此示例中，我们定义了两个简单的自定义元素<open-shadow> 和<closed-shadow>，它们都获取其文本属性的内容并将其插入到元素的 Shadow DOM 中，作为<p> 元素的文本内容。两者之间的唯一区别在于它们的 Shadow Root 分别以open 和closed 模式附加。

这两个定义如下所示

js
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);
    }
  },
);

然后我们将每个元素都插入到我们的页面中

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

然后在<html> 元素上包含一个点击事件侦听器

js
document.querySelector("html").addEventListener("click", (e) => {
  console.log(e.composed);
  console.log(e.composedPath());
});

当您点击<open-shadow> 元素，然后点击<closed-shadow> 元素时，您会注意到两件事。

  1. composed 属性返回true，因为click 事件始终能够跨 Shadow 边界传播。
  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 ]

在第二种情况下，事件侦听器仅传播到<closed-shadow> 元素本身，而不是传播到 Shadow 边界内的节点。

规范

规范
DOM 标准
# ref-for-dom-event-composed①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。