The composedPath JS Event 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>