diff --git a/source/components/host/call-button.mjs b/source/components/host/call-button.mjs
index 059804265d07a95341a90bc7227a0080b3358481..0be9dd426193443e3cc68915c79fa213882ca165 100644
--- a/source/components/host/call-button.mjs
+++ b/source/components/host/call-button.mjs
@@ -20,7 +20,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { CallButtonStyleSheet } from "./stylesheet/call-button.mjs";
 import { isArray, isObject, isFunction } from "../../types/is.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import {findElementWithSelectorUpwards, getDocument} from "../../dom/util.mjs";
 import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
 
 export { CallButton };
@@ -200,7 +200,6 @@ function initOptionsFromArguments() {
  * @throws {Error} The option references.callableSelector must be an array
  */
 function initEventHandler() {
-	const doc = getDocument();
 
 	this[callButtonElementSymbol].addEventListener("click", (event) => {
 		event.preventDefault();
@@ -218,7 +217,7 @@ function initEventHandler() {
 		}
 
 		for (const selector of selectors) {
-			const element = doc.querySelector(selector);
+			const element = findElementWithSelectorUpwards( this,selector);
 			if (element instanceof HTMLElement && isFunction(element?.[call])) {
 				element[call]();
 			}