diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
index 997a63597..244877beb 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
@@ -547,7 +547,7 @@ function transformAttributes(path, results) {
         (reservedNameSpace ||
           !(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression)))
       ) {
-        if (key === "ref") {
+        if (key === "ref" || key.slice(0, 4) === "ref:") {
           // Normalize expressions for non-null and type-as
           while (
             t.isTSNonNullExpression(value.expression) ||
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/shared/component.js b/packages/babel-plugin-jsx-dom-expressions/src/shared/component.js
index 3762b868b..1bc21094c 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/shared/component.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/shared/component.js
@@ -68,7 +68,7 @@ export default function transformComponent(path) {
           key = id.name;
         if (hasChildren && key === "children") return;
         if (t.isJSXExpressionContainer(value))
-          if (key === "ref") {
+          if (key === "ref" || (key && key.slice(0, 4) === 'ref:')) {
             if (config.generate === "ssr") return;
             // Normalize expressions for non-null and type-as
             while (
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js
index 2bde30efe..e52627093 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js
@@ -9,10 +9,11 @@ export const reservedNameSpaces = new Set([
   "use",
   "prop",
   "attr",
-  "bool"
+  "bool",
+  "ref"
 ]);
 
-export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool"]);
+export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool", "ref"]);
 
 export function getConfig(path) {
   return path.hub.file.metadata.config;
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js b/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
index 1db752788..1a2ff304b 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
@@ -302,6 +302,7 @@ function transformAttributes(path, results, info) {
     ) {
       if (
         key === "ref" ||
+        key.startsWith("ref:") ||
         key.startsWith("use:") ||
         key.startsWith("prop:") ||
         key.startsWith("on")
@@ -555,6 +556,7 @@ function createElement(path, { topLevel, hydratable }) {
         if (hasChildren && key === "children") return;
         if (
           key === "ref" ||
+          key.startsWith("ref:") ||
           key.startsWith("use:") ||
           key.startsWith("prop:") ||
           key.startsWith("on")
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/universal/element.js b/packages/babel-plugin-jsx-dom-expressions/src/universal/element.js
index cff5d84ec..5613aa75e 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/universal/element.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/universal/element.js
@@ -85,7 +85,7 @@ function transformAttributes(path, results) {
         node.value = value = t.jsxExpressionContainer(value || t.jsxEmptyExpression());
       }
       if (t.isJSXExpressionContainer(value)) {
-        if (key === "ref") {
+        if (key === "ref" || key.slice(0, 4) === "ref:") {
           // Normalize expressions for non-null and type-as
           while (
             t.isTSNonNullExpression(value.expression) ||
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
index ac9fe990c..3e92c5f2d 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
@@ -275,4 +275,14 @@ const template90 = <video playsinline={true}/>
 const template91 = <video playsinline={false}/>
 const template92 = <video playsInline={value}/>
 const template93 = <video playsInline={true}/>
-const template94 = <video playsInline={false}/>
\ No newline at end of file
+const template94 = <video playsInline={false}/>
+
+const template95 = <video ref:bla={(el1)=>console.log(el1)} ref:view={(el2)=>console.log(el2)}/>
+const template96 = <video ref={(el1)=>console.log(el1)} ref={(el2)=>console.log(el2)}/>
+
+let ref1
+let ref2
+const template97 = <video ref:bla={ref1} ref:view={ref2}/>
+let ref3
+let ref4
+const template98 = <video ref={ref3} ref={ref4}/>
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
index aa14d3ffb..aa947a876 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
@@ -640,4 +640,36 @@ const template94 = (() => {
   _el$112.playsInline = false;
   return _el$112;
 })();
+const template95 = (() => {
+  var _el$113 = _tmpl$56();
+  _$use(el2 => console.log(el2), _el$113);
+  _$use(el1 => console.log(el1), _el$113);
+  return _el$113;
+})();
+const template96 = (() => {
+  var _el$114 = _tmpl$56();
+  _$use(el2 => console.log(el2), _el$114);
+  _$use(el1 => console.log(el1), _el$114);
+  return _el$114;
+})();
+let ref1;
+let ref2;
+const template97 = (() => {
+  var _el$115 = _tmpl$56();
+  var _ref$12 = ref2;
+  typeof _ref$12 === "function" ? _$use(_ref$12, _el$115) : (ref2 = _el$115);
+  var _ref$11 = ref1;
+  typeof _ref$11 === "function" ? _$use(_ref$11, _el$115) : (ref1 = _el$115);
+  return _el$115;
+})();
+let ref3;
+let ref4;
+const template98 = (() => {
+  var _el$116 = _tmpl$56();
+  var _ref$14 = ref4;
+  typeof _ref$14 === "function" ? _$use(_ref$14, _el$116) : (ref4 = _el$116);
+  var _ref$13 = ref3;
+  typeof _ref$13 === "function" ? _$use(_ref$13, _el$116) : (ref3 = _el$116);
+  return _el$116;
+})();
 _$delegateEvents(["click", "input"]);
diff --git a/packages/dom-expressions/src/client.js b/packages/dom-expressions/src/client.js
index a5c1d15c6..4be49ae91 100644
--- a/packages/dom-expressions/src/client.js
+++ b/packages/dom-expressions/src/client.js
@@ -342,7 +342,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
-  if (prop === "ref") {
+  if (prop === "ref" || prop.slice(0, 4) === "ref:") {
     if (!skipRef) value(node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
diff --git a/packages/dom-expressions/src/jsx-h.d.ts b/packages/dom-expressions/src/jsx-h.d.ts
index bc3328ad5..8e7dc6819 100644
--- a/packages/dom-expressions/src/jsx-h.d.ts
+++ b/packages/dom-expressions/src/jsx-h.d.ts
@@ -139,6 +139,7 @@ export namespace JSX {
 
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void) | undefined;
+    [attr: `ref:${string}`]: unknown | ((e: unknown) => void) | undefined;
   }
   interface CustomAttributes<T> {
     ref?: T | ((el: T) => void) | undefined;
diff --git a/packages/dom-expressions/src/jsx.d.ts b/packages/dom-expressions/src/jsx.d.ts
index cf579d6bf..ae958b9bd 100644
--- a/packages/dom-expressions/src/jsx.d.ts
+++ b/packages/dom-expressions/src/jsx.d.ts
@@ -136,6 +136,7 @@ export namespace JSX {
 
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void) | undefined;
+    [attr: `ref:${string}`]: unknown | ((e: unknown) => void) | undefined;
   }
   interface CustomAttributes<T> {
     ref?: T | ((el: T) => void) | undefined;
diff --git a/packages/dom-expressions/src/server.js b/packages/dom-expressions/src/server.js
index 72cc3daaa..1188b8d0f 100644
--- a/packages/dom-expressions/src/server.js
+++ b/packages/dom-expressions/src/server.js
@@ -383,6 +383,7 @@ export function ssrElement(tag, props, children, needsId) {
     } else if (
       value == undefined ||
       prop === "ref" ||
+      prop.slice(0, 4) === "ref:" ||
       prop.slice(0, 2) === "on" ||
       prop.slice(0, 5) === "prop:"
     ) {
@@ -681,6 +682,7 @@ export function ssrSpread(props, isSVG, skipChildren) {
     } else if (
       value == undefined ||
       prop === "ref" ||
+      prop.slice(0, 4) === "ref:" ||
       prop.slice(0, 2) === "on" ||
       prop.slice(0, 5) === "prop:"
     ) {
diff --git a/packages/dom-expressions/src/universal.js b/packages/dom-expressions/src/universal.js
index 291335e82..7803ed2ed 100644
--- a/packages/dom-expressions/src/universal.js
+++ b/packages/dom-expressions/src/universal.js
@@ -220,7 +220,7 @@ export function createRenderer({
     effect(() => props.ref && props.ref(node));
     effect(() => {
       for (const prop in props) {
-        if (prop === "children" || prop === "ref") continue;
+        if (prop === "children" || prop === "ref" || prop.slice(0, 4) === "ref:") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
         setProperty(node, prop, value, prevProps[prop]);
diff --git a/packages/hyper-dom-expressions/src/index.ts b/packages/hyper-dom-expressions/src/index.ts
index 1c712259e..0c71eaf1c 100644
--- a/packages/hyper-dom-expressions/src/index.ts
+++ b/packages/hyper-dom-expressions/src/index.ts
@@ -70,7 +70,7 @@ export function createHyperScript(r: Runtime): HyperScript {
             Object.defineProperty(l,"class",{...d[k],value})
             classes = []
           }
-          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+          if (k !== "ref" && k.slice(0, 4) !== 'ref:' && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
             r.dynamicProperty(l, k);
             dynamic = true;
           } else if (d[k].get) dynamic = true;
diff --git a/packages/lit-dom-expressions/src/index.ts b/packages/lit-dom-expressions/src/index.ts
index ff63bc147..cc9c64d72 100644
--- a/packages/lit-dom-expressions/src/index.ts
+++ b/packages/lit-dom-expressions/src/index.ts
@@ -230,7 +230,7 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
           })`
         );
       }
-    } else if (name === "ref") {
+    } else if (name === "ref" || name.slice(0, 4) === "ref:") {
       options.exprs.push(`exprs[${options.counter++}](${tag})`);
     } else {
       const childOptions = Object.assign({}, options, { exprs: [] }),
@@ -446,7 +446,7 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
             if (value.includes("###")) {
               let count = options.counter++;
               current += `${name}: ${
-                name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""
+                name !== "ref" && name.slice(0, 4) !== "ref:" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""
               }exprs[${count}],`;
             } else if (name === "###") {
               if (current.length) {