Add support for shadow dom

.env.development

@@ -6,3 +6,4 @@
 
 # Default NODE_ENV with vite build --mode=test is production
 NODE_ENV=development
+# VITE_SHADOW_DOM_BUILD=true # Activate this option to run the demo app and all tests within the Shadow DOM.

.try.mjs

@@ -93,6 +93,17 @@ export default {
         },
       },
     },
+    {
+      name: 'ember-lts-6.8-shadow-dom',
+      npm: {
+        devDependencies: {
+          'ember-source': 'npm:ember-source@~6.8.0',
+        },
+      },
+      env: {
+        VITE_SHADOW_DOM_BUILD: true,
+      },
+    },
     {
       name: 'ember-latest',
       npm: {

README.md

@@ -13,6 +13,7 @@ Customizable Calendar Component for Ember.
 - 🖊 **TypeScript support** – ships with type definitions for smooth TypeScript integration.
 - ✨ **Glint support** – template type-checking out of the box for safer templates.
 - 🚀 **FastBoot compatible** – works in server-rendered Ember apps.
+- 🕶 **Shadow DOM support** – can be rendered inside shadow roots without breaking positioning or events.
 - 🛠 **Addon v2 ready** – modern Ember Addon v2 format.
 - 🧱 **Headless & flexible** – build any calendar or date-picker UI without being constrained by markup or styles.
 - 🎯 **Powerful selection modes** – choose between single, range, or multiple date selection

demo-app/components/host-wrapper.gts

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+const shadowRootBuild = import.meta.env.VITE_SHADOW_DOM_BUILD === 'true';
+
+export default class HostWrapper extends Component<{
+  Element: HTMLDivElement;
+  Blocks: { default: [] };
+}> {
+  @tracked shadow: Element | undefined;
+
+  setShadow = (shadowRoot: HTMLDivElement) => {
+    this.shadow = shadowRoot;
+  };
+
+  get getStyles() {
+    return [...document.head.querySelectorAll('link')].map((link) => link.href);
+  }
+
+  attachShadow = modifier(
+    (element: Element, [set]: [(shadowRoot: HTMLDivElement) => void]) => {
+      let shadowRoot = element;
+      if (shadowRootBuild) {
+        shadowRoot = element.attachShadow({
+          mode: 'open',
+          delegatesFocus: true,
+        }) as unknown as Element;
+      }
+      const div = document.createElement('div');
+      shadowRoot.appendChild(div);
+      set(div);
+    },
+  );
+  <template>
+    <div
+      data-host-wrapper
+      {{this.attachShadow this.setShadow}}
+      ...attributes
+    ></div>
+
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{#if shadowRootBuild}}
+          {{#each this.getStyles as |styleHref|}}
+            <link rel="stylesheet" type="text/css" href={{styleHref}} />
+          {{/each}}
+          <BasicDropdownWormhole />
+        {{/if}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
+}

demo-app/components/shadow-root.gts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { not } from 'ember-truth-helpers';
+
+// @ts-expect-error Public property 'isFastBoot' of exported class
+const isFastBoot = typeof FastBoot !== 'undefined';
+
+export default class ShadowRoot extends Component<{
+  Element: HTMLDivElement;
+  Blocks: { default: [] };
+}> {
+  get shadowDom() {
+    if (this.isFastBoot) {
+      return false;
+    }
+
+    if (import.meta.env.VITE_SHADOW_DOM_BUILD === 'true') {
+      return true;
+    }
+
+    return false;
+  }
+
+  isFastBoot = isFastBoot;
+
+  get shadowRootElement(): HTMLElement | null | undefined {
+    const shadowRoot = document.getElementById('shadow-root')?.shadowRoot;
+    const div = document.createElement('div');
+    shadowRoot?.appendChild(div);
+
+    return div;
+  }
+
+  get getStyles() {
+    return [...document.head.querySelectorAll('link')].map((link) => link.href);
+  }
+
+  <template>
+    {{#if (not this.shadowDom)}}
+      {{yield}}
+    {{else if this.shadowRootElement}}
+      {{#in-element this.shadowRootElement}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
+}

demo-app/components/shadow.gts

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+export default class Shadow extends Component<{
+  Element: HTMLDivElement;
+  Blocks: { default: [] };
+}> {
+  @tracked shadow: Element | undefined;
+
+  setShadow = (shadowRoot: HTMLDivElement) => {
+    this.shadow = shadowRoot;
+  };
+
+  get getStyles() {
+    return [...document.head.querySelectorAll('link')].map((link) => link.href);
+  }
+
+  attachShadow = modifier(
+    (element: Element, [set]: [(shadowRoot: HTMLDivElement) => void]) => {
+      const shadowRoot = element.attachShadow({
+        mode: 'open',
+        delegatesFocus: true,
+      });
+      const div = document.createElement('div');
+      shadowRoot.appendChild(div);
+      set(div);
+    },
+  );
+  <template>
+    <div data-shadow {{this.attachShadow this.setShadow}} ...attributes></div>
+
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
+}

demo-app/templates/application.gts

@@ -1,13 +1,44 @@
 import Component from '@glimmer/component';
 import RouteTemplate from 'ember-route-template';
+import ShadowRoot from '../components/shadow-root';
 import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+import type Owner from '@ember/owner';
+
+// @ts-expect-error Cannot find name 'FastBoot'.
+const isFastBoot = typeof FastBoot !== 'undefined';
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 class Application extends Component {
+  shadowDom = false;
+
+  constructor(owner: Owner, args: object) {
+    super(owner, args);
+
+    if (import.meta.env.VITE_SHADOW_DOM_BUILD === 'true') {
+      this.shadowDom = true;
+    }
+
+    if (!this.shadowDom || isFastBoot) {
+      return;
+    }
+
+    customElements.define(
+      'shadow-root',
+      class extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({ mode: 'open', delegatesFocus: true });
+        }
+      },
+    );
+  }
+
   <template>
-    {{outlet}}
+    <ShadowRoot>
+      <BasicDropdownWormhole />
+
+      <h1>Welcome to ember-power-calendar!</h1>
 
-    <BasicDropdownWormhole />
+      {{outlet}}
+    </ShadowRoot>
   </template>
 }
 

index.html

@@ -14,6 +14,8 @@
 
 <body>
 
+  <shadow-root id="shadow-root"></shadow-root>
+
   <script type="module">
     import { App } from './demo-app/app';
 

src/-private/days-utils.ts

@@ -142,8 +142,16 @@ export function handleDayKeyDown(
   return day;
 }
 
-export function focusDate(uniqueId: string, id: string): void {
-  const dayElement: HTMLElement | null = document.querySelector(
+export function focusDate(
+  uniqueId: string,
+  id: string,
+  element?: HTMLElement,
+): void {
+  let rootElement: Document | HTMLElement = document;
+  if (element) {
+    rootElement = element.getRootNode() as HTMLElement;
+  }
+  const dayElement: HTMLElement | null = rootElement.querySelector(
     `[data-power-calendar-id="${uniqueId}"] [data-date="${id}"]`,
   );
   if (dayElement) {

src/components/power-calendar-multiple/days.gts

@@ -66,6 +66,7 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
   @tracked focusedId: string | null = null;
 
   didSetup = false;
+  element: HTMLElement | undefined;
 
   get weekdayFormat(): TWeekdayFormat {
     return this.args.weekdayFormat || 'short'; // "min" | "short" | "long"
@@ -152,15 +153,39 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
   // Actions
   @action
   handleDayFocus(e: FocusEvent): void {
+    const element = e.target as HTMLElement;
     queueMicrotask(() => {
-      this._updateFocused((e.target as HTMLElement).dataset['date']);
+      if (!element) {
+        return;
+      }
+
+      this._updateFocused(element.dataset['date']);
     });
   }
 
   @action
   handleDayBlur(): void {
     queueMicrotask(() => {
-      this._updateFocused(null);
+      let activeElement = document.activeElement;
+      if (this.element?.getRootNode() instanceof ShadowRoot) {
+        activeElement =
+          (this.element.getRootNode() as ShadowRoot).host.shadowRoot
+            ?.activeElement ?? null;
+      }
+
+      let rootElement: Document | HTMLElement = document;
+
+      if (this.element) {
+        rootElement = this.element.getRootNode() as HTMLElement;
+      }
+
+      const dayElement: HTMLElement | null = rootElement.querySelector(
+        `[data-power-calendar-id="${this.args.calendar.uniqueId}"] [data-date="${this.focusedId}"]`,
+      );
+
+      if (!activeElement || activeElement !== dayElement) {
+        this._updateFocused(null);
+      }
     });
   }
 
@@ -209,7 +234,11 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
 
     this.focusedId = day.id;
     queueMicrotask(() => {
-      focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+      focusDate(
+        this.args.calendar.uniqueId,
+        this.focusedId ?? '',
+        this.element,
+      );
     });
   }
 
@@ -218,11 +247,13 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
     handleClick(e, this.days, this.args.calendar);
   }
 
-  setup = modifier(() => {
+  setup = modifier((element: HTMLElement) => {
     if (this.didSetup) {
       return;
     }
 
+    this.element = element;
+
     this.didSetup = true;
 
     if (this.args.autofocus) {
@@ -251,7 +282,7 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
       }
     }
 
-    focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+    focusDate(this.args.calendar.uniqueId, this.focusedId ?? '', this.element);
   }
 
   async focusDay(e: MouseEvent | KeyboardEvent, date: Date, step: number = 0) {
@@ -280,10 +311,18 @@ export default class PowerCalendarMultipleDays extends Component<PowerCalendarMu
 
     if (step !== 0) {
       queueMicrotask(() => {
-        focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+        focusDate(
+          this.args.calendar.uniqueId,
+          this.focusedId ?? '',
+          this.element,
+        );
       });
     } else {
-      focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+      focusDate(
+        this.args.calendar.uniqueId,
+        this.focusedId ?? '',
+        this.element,
+      );
     }
   }