diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts b/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
index d70f7e53809..1fae43e8a19 100644
--- a/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
+++ b/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
@@ -386,4 +386,20 @@ describe("calcite-shell-panel", () => {
     expect(separator.getAttribute("aria-valuenow")).toBe("330");
     expect((await content.getComputedStyle()).width).toBe("330px");
   });
+
+  it("click event should pass through host element", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-shell content-behind>
+        <calcite-shell-panel slot="primary-panel" position="start" detached></calcite-shell-panel>
+        <calcite-action text="test" style="height: 100%; width: 100%;" text-enabled></calcite-action>
+      </calcite-shell>`
+    );
+
+    await page.waitForChanges();
+    const shellPanel = await page.find("calcite-shell-panel");
+    await shellPanel.click();
+    await page.waitForChanges();
+    expect(await page.evaluate((selector) => document.activeElement.matches(selector), "calcite-action")).toBe(true);
+  });
 });
diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.scss b/src/components/calcite-shell-panel/calcite-shell-panel.scss
index 20201a1cbe3..2cb49e011db 100755
--- a/src/components/calcite-shell-panel/calcite-shell-panel.scss
+++ b/src/components/calcite-shell-panel/calcite-shell-panel.scss
@@ -1,7 +1,8 @@
 :host {
   @apply flex
     items-stretch
-    flex-initial;
+    flex-initial
+    pointer-events-none;
   --calcite-shell-panel-detached-max-height: unset;
 }