use get function to resolve hostref

src/client/client-host-ref.ts

@@ -11,8 +11,8 @@ import type * as d from '../declarations';
  * @returns — true if the element was successfully removed, or false if it was not present.
  */
 export const deleteHostRef = (ref: d.RuntimeRef): boolean => {
-  if (ref.$hostRef$) {
-    delete ref.$hostRef$;
+  if (ref.__stencil__getHostRef) {
+    delete ref.__stencil__getHostRef;
     return true;
   }
 
@@ -26,7 +26,11 @@ export const deleteHostRef = (ref: d.RuntimeRef): boolean => {
  * @returns the Host reference (if found) or undefined
  */
 export const getHostRef = (ref: d.RuntimeRef): d.HostRef | undefined => {
-  return ref.$hostRef$;
+  if (ref.__stencil__getHostRef) {
+    return ref.__stencil__getHostRef();
+  }
+
+  return undefined;
 };
 
 /**
@@ -37,7 +41,7 @@ export const getHostRef = (ref: d.RuntimeRef): d.HostRef | undefined => {
  * @param hostRef that instances `HostRef` object
  */
 export const registerInstance = (lazyInstance: any, hostRef: d.HostRef) => {
-  lazyInstance.$hostRef$ = hostRef;
+  lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
 
   if (BUILD.modernPropertyDecls && (BUILD.state || BUILD.prop)) {
@@ -73,7 +77,8 @@ export const registerHost = (hostElement: d.HostElement, cmpMeta: d.ComponentRun
     hostElement['s-rc'] = [];
   }
 
-  const ref = (hostElement.$hostRef$ = hostRef);
+  const ref = hostRef;
+  hostElement.__stencil__getHostRef = () => ref;
 
   if (!BUILD.lazyLoad && BUILD.modernPropertyDecls && (BUILD.state || BUILD.prop)) {
     reWireGetterSetter(hostElement, hostRef);

src/declarations/stencil-private.ts

@@ -1088,7 +1088,7 @@ export interface HostElement extends HTMLElement {
   host?: Element;
   forceUpdate?: () => void;
 
-  $hostRef$?: HostRef;
+  __stencil__getHostRef?: () => HostRef;
 
   // "s-" prefixed properties should not be property renamed
   // and should be common between all versions of stencil
@@ -1726,7 +1726,7 @@ export type ComponentRuntimeReflectingAttr = [string, string | undefined];
  * keys in a `WeakMap` which maps {@link HostElement} instances to their
  * associated {@link HostRef} instance.
  */
-export type RuntimeRef = HostElement | { $hostRef$?: HostRef };
+export type RuntimeRef = HostElement | { __stencil__getHostRef?: () => HostRef };
 
 /**
  * Interface used to track an Element, it's virtual Node (`VNode`), and other data