JavaScript Event composed Property

document.getElementById("btn").addEventListener("click", (event) => {
  console.log(event.composed); // true for click
});

const soft = new Event("notify"); // default composed: false
const hard = new Event("notify", { composed: true });

console.log(soft.composed); // false
console.log(hard.composed); // true

const host = document.getElementById("host");
const shadow = host.attachShadow({ mode: "open" });
const inner = document.createElement("button");
inner.textContent = "Notify";
shadow.appendChild(inner);

host.addEventListener("notify", () => {
  console.log("host heard notify");
});

inner.addEventListener("click", () => {
  inner.dispatchEvent(
    new Event("notify", { bubbles: true, composed: true })
  );
});