diff --git a/src/app/template_set.ts b/src/app/template_set.ts
index f905f64b..0fb1b2bf 100644
--- a/src/app/template_set.ts
+++ b/src/app/template_set.ts
@@ -1,9 +1,8 @@
 import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
-import { compile, Template } from "../compiler";
-import { Portal } from "../portal";
+import { compile, Template, TemplateFunction } from "../compiler";
+import { Portal, portalTemplate } from "../portal";
 import { component, getCurrent } from "../component/component_node";
 import { helpers } from "./template_helpers";
-import { globalTemplates } from "../utils";
 
 const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
 
@@ -45,6 +44,9 @@ export interface TemplateSetConfig {
 }
 
 export class TemplateSet {
+  static registerTemplate(name: string, fn: TemplateFunction) {
+    globalTemplates[name] = fn;
+  }
   dev: boolean;
   rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
   templates: { [name: string]: Template } = {};
@@ -64,7 +66,12 @@ export class TemplateSet {
   addTemplate(name: string, template: string | Element) {
     if (name in this.rawTemplates) {
       const rawTemplate = this.rawTemplates[name];
-      const currentAsString = typeof rawTemplate === "string" ? rawTemplate : rawTemplate.outerHTML;
+      const currentAsString =
+        typeof rawTemplate === "string"
+          ? rawTemplate
+          : rawTemplate instanceof Element
+          ? rawTemplate.outerHTML
+          : rawTemplate.toString();
       const newAsString = typeof template === "string" ? template : template.outerHTML;
       if (currentAsString === newAsString) {
         return;
@@ -97,7 +104,8 @@ export class TemplateSet {
         } catch {}
         throw new Error(`Missing template: "${name}"${extraInfo}`);
       }
-      const templateFn = this._compileTemplate(name, rawTemplate);
+      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       const templates = this.templates;
@@ -124,3 +132,19 @@ export class TemplateSet {
     return toggler(subTemplate, template.call(owner, ctx, parent, key));
   }
 }
+
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
+
+export function xml(...args: Parameters<typeof String.raw>) {
+  const name = `__template__${xml.nextId++}`;
+  const value = String.raw(...args);
+  globalTemplates[name] = value;
+  return name;
+}
+
+xml.nextId = 1;
+
+TemplateSet.registerTemplate("__portal__", portalTemplate);
diff --git a/src/component/component_node.ts b/src/component/component_node.ts
index 599c0e67..252baaf9 100644
--- a/src/component/component_node.ts
+++ b/src/component/component_node.ts
@@ -188,7 +188,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
         props[key] = useState(prop);
       }
     }
-    this.component = new C(props, env, this) as any;
+    this.component = new C(props, env, this);
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     this.component.setup();
     currentNode = null;
diff --git a/src/index.ts b/src/index.ts
index bbc52c05..2f260fc5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,12 +34,13 @@ export const blockDom = {
 };
 
 export { App, mount } from "./app/app";
+export { xml } from "./app/template_set";
 export { Component } from "./component/component";
 export { useComponent, useState } from "./component/component_node";
 export { status } from "./component/status";
 export { reactive, markRaw, toRaw } from "./reactivity";
 export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
-export { EventBus, whenReady, loadFile, markup, xml } from "./utils";
+export { EventBus, whenReady, loadFile, markup } from "./utils";
 export {
   onWillStart,
   onMounted,
diff --git a/src/portal.ts b/src/portal.ts
index 8504c083..ca3211e4 100644
--- a/src/portal.ts
+++ b/src/portal.ts
@@ -1,5 +1,5 @@
 import { onWillUnmount } from "./component/lifecycle_hooks";
-import { xml } from "./utils";
+// import { xml } from "./app/template_set";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component/component";
 
@@ -53,8 +53,17 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
   }
 }
 
+/**
+ * <t t-slot="default"/>
+ */
+export function portalTemplate(app: any, bdom: any, helpers: any) {
+  let { callSlot } = helpers;
+  return function template(ctx: any, node: any, key = "") {
+    return callSlot(ctx, node, key, "default", false, null);
+  };
+}
 export class Portal extends Component {
-  static template = xml`<t t-slot="default"/>`;
+  static template = "__portal__";
   static props = {
     target: {
       type: String,
diff --git a/src/utils.ts b/src/utils.ts
index 78d32876..990dfc04 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -73,17 +73,3 @@ export class Markup extends String {}
 export function markup(value: any) {
   return new Markup(value);
 }
-
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-export const globalTemplates: { [key: string]: string | Element } = {};
-
-export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
-  const value = String.raw(...args);
-  globalTemplates[name] = value;
-  return name;
-}
-
-xml.nextId = 1;
diff --git a/tests/helpers.ts b/tests/helpers.ts
index 5b93970b..c660861c 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -16,10 +16,9 @@ import {
   xml,
 } from "../src";
 import { helpers } from "../src/app/template_helpers";
-import { TemplateSet } from "../src/app/template_set";
+import { TemplateSet, globalTemplates } from "../src/app/template_set";
 import { BDom } from "../src/blockdom";
 import { compile } from "../src/compiler";
-import { globalTemplates } from "../src/utils";
 
 const mount = blockDom.mount;