The composedPath of Event for JS returns the invocation target objects of event's path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root's mode is "closed" that are not reachable from event's currentTarget.
<!doctype html>
<html>
<body>
<my-element></my-element>
<output></output>
<script>
const element1 = document.querySelector("my-element");
const element2 = document.createElement("div");
element2.innerHTML = element1.innerHTML;
const init =
{
mode: "closed"
};
const shadow = element1.attachShadow(init);
shadow.append(element2);
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composedPath();
console.log(myparameter.composedPath());
}
const type = "mytype";
const eventInitDict =
{
composed: true
};
const event = new Event(type, eventInitDict);
const target1 = element1;
const target2 = element2;
target1.addEventListener(type, callback);
target2.dispatchEvent(event);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element></my-element>
<output></output>
<script>
const element1 = document.querySelector("my-element");
const element2 = document.createElement("div");
element2.innerHTML = element1.innerHTML;
const init =
{
mode: "open"
};
const shadow = element1.attachShadow(init);
shadow.append(element2);
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composedPath();
console.log(myparameter.composedPath());
}
const type = "mytype";
const eventInitDict =
{
composed: true
};
const event = new Event(type, eventInitDict);
const target1 = element1;
const target2 = element2;
target1.addEventListener(type, callback);
target2.dispatchEvent(event);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>button</button>
<output></output>
<script>
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composedPath();
console.log(myparameter.composedPath());
}
const type = "mouseover";
const target = document.querySelector("button");
target.addEventListener(type, callback);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element>button</my-element>
<output></output>
<script>
const element1 = document.querySelector("my-element");
const element2 = document.createElement("button");
element2.innerHTML = element1.innerHTML;
const init =
{
mode: "closed"
};
const shadow = element1.attachShadow(init);
shadow.append(element2);
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composedPath();
console.log(myparameter.composedPath());
}
const type = "mouseover";
const target = element1;
target.addEventListener(type, callback);
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<my-element>button</my-element>
<output></output>
<script>
const element1 = document.querySelector("my-element");
const element2 = document.createElement("button");
element2.innerHTML = element1.innerHTML;
const init =
{
mode: "open"
};
const shadow = element1.attachShadow(init);
shadow.append(element2);
function callback(myparameter)
{
document.querySelector("output").innerHTML = myparameter.composedPath();
console.log(myparameter.composedPath());
}
const type = "mouseover";
const target = element1;
target.addEventListener(type, callback);
</script>
</body>
</html>