chore(deps): update @stencil/core to v4.36.2 (#30587)

brandyscarney · web-flow · commit 6203b88b9fd5 · 2025-07-31T15:35:43.000Z
Issue number: resolves #30565 --------- ## What is the current behavior? Stencil is on v4.33.1 ## What is the new behavior? - Updates Stencil to v4.36.2 - Updates `children` references to `__children` in `reorder-group` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I searched through the repository for other components that may be affected but did not find any. Dev build: `8.7.1-dev.11753971948.1b297d94` Reorder Example using dev build: [StackBlitz](https://stackblitz.com/edit/5nrzhbja) Router Example using dev build: [StackBlitz](https://stackblitz.com/edit/rvpcflzx) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.33.1",
+    "@stencil/core": "4.36.2",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
@@ -6,6 +6,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Gesture, GestureDetail } from '../../interface';
+import type { HTMLStencilElement } from '../../utils/element-interface';
 
 import type { ItemReorderEventDetail, ReorderMoveEventDetail, ReorderEndEventDetail } from './reorder-group-interface';
 
@@ -38,7 +39,7 @@ export class ReorderGroup implements ComponentInterface {
 
   @State() state = ReorderGroupState.Idle;
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLStencilElement;
 
   /**
    * If `true`, the reorder will be hidden.
@@ -152,7 +153,7 @@ export class ReorderGroup implements ComponentInterface {
     const heights = this.cachedHeights;
     heights.length = 0;
     const el = this.el;
-    const children: any = el.children;
+    const children: any = el.__children;
     if (!children || children.length === 0) {
       return;
     }
@@ -258,7 +259,7 @@ export class ReorderGroup implements ComponentInterface {
   private completeReorder(listOrReorder?: boolean | any[]): any {
     const selectedItemEl = this.selectedItemEl;
     if (selectedItemEl && this.state === ReorderGroupState.Complete) {
-      const children = this.el.children as any;
+      const children: any = this.el.__children;
       const len = children.length;
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
@@ -308,7 +309,7 @@ export class ReorderGroup implements ComponentInterface {
   /********* DOM WRITE ********* */
   private reorderMove(fromIndex: number, toIndex: number) {
     const itemHeight = this.selectedItemHeight;
-    const children = this.el.children;
+    const children: any = this.el.__children;
     for (let i = 0; i < children.length; i++) {
       const style = (children[i] as any).style;
       let value = '';
diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts
@@ -1,10 +1,6 @@
-import type { AnimationBuilder, ComponentProps } from '../../../interface';
+import type { AnimationBuilder, ComponentProps, HTMLStencilElement } from '../../../interface';
 import type { NavigationHookCallback } from '../../route/route-interface';
 
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-}
-
 export interface NavOutlet {
   setRouteId(
     id: string,
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
@@ -23,7 +23,7 @@ export { PickerOptions, PickerColumnOption } from './components/picker-legacy/pi
 export { PopoverOptions } from './components/popover/popover-interface';
 export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
-export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
+export { RouterCustomEvent } from './components/router/utils/interface';
 export { RefresherCustomEvent } from './components/refresher/refresher-interface';
 export {
   ItemReorderCustomEvent,
@@ -49,6 +49,7 @@ export {
   AnimationKeyFrames,
   AnimationLifecycle,
 } from './utils/animation/animation-interface';
+export { HTMLStencilElement } from './utils/element-interface';
 export { TransitionOptions } from './utils/transition';
 export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface';
 export { Config, config } from './global/config';
diff --git a/core/src/utils/element-interface.ts b/core/src/utils/element-interface.ts
@@ -1,6 +1,19 @@
 // The interfaces in this file are used to make sure our components
 // have the correct properties defined that are needed to pass to
-// the native HTML elements they render
+// the native HTML elements they render. The HTMLStencilElement interface
+// extends HTMLElement to provide Stencil-specific functionality like
+// componentOnReady() and proper children handling.
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  /**
+   * Stencil patches `el.children` to behave like calling `el.children` on an
+   * element with shadow DOM even though the component is not a shadow DOM element.
+   * To allow components to work properly we need to access the original accessor
+   * for this property which is `__children`.
+   */
+  __children?: HTMLCollection;
+}
 
 export interface AnchorInterface {
   href: string | undefined;
