diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index ca341a15..9ded7cc2 100644
--- a/src/compiler/code_generator.ts
+++ b/src/compiler/code_generator.ts
@@ -1268,7 +1268,8 @@ export class CodeGenerator {
       this.helpers.add("capture");
       this.define(ctxStr, `capture(ctx);`);
     }
-    const blockString = `component(Portal, {target: ${ast.target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
+    const target = compileExpr(ast.target);
+    const blockString = `component(Portal, {target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
     if (block) {
       this.insertAnchor(block);
     }
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index c7a72206..5096ab47 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/tests/misc/__snapshots__/portal.test.ts.snap
@@ -254,6 +254,26 @@ exports[`Portal basic use of portal on div 1`] = `
 }"
 `;
 
+exports[`Portal basic use of portal, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { Portal } = helpers;
+  
+  let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>2</p>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block2();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b3 = component(Portal, {target: ctx['target'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return block1([], [b3]);
+  }
+}"
+`;
+
 exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts
index ff373a17..dc3ae63e 100644
--- a/tests/misc/portal.test.ts
+++ b/tests/misc/portal.test.ts
@@ -67,6 +67,25 @@ describe("Portal", () => {
 
     expect(fixture.innerHTML).toBe('<div id="outside"><p>2</p></div><div><span>1</span></div>');
   });
+
+  test("basic use of portal, variation", async () => {
+    class Parent extends Component {
+      static template = xml`
+          <div>
+            <span>1</span>
+            <t t-portal="target">
+              <p>2</p>
+            </t>
+          </div>`;
+      target = "#outside";
+    }
+
+    addOutsideDiv(fixture);
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe('<div id="outside"><p>2</p></div><div><span>1</span></div>');
+  });
+
   test("basic use of portal on div", async () => {
     class Parent extends Component {
       static template = xml`