Allow access to parent scope refs

packages/alpinejs/src/magics/$refs.js

@@ -1,4 +1,25 @@
 import { closestRoot } from '../lifecycle'
+import { mergeProxies } from '../scope'
 import { magic } from '../magics'
 
-magic('refs', el => closestRoot(el)._x_refs || {})
+magic('refs', el => {
+    if (el._x_refs_proxy) return el._x_refs_proxy
+
+    el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el))
+
+    return el._x_refs_proxy
+})
+
+function getArrayOfRefObject(el) {
+    let refObjects = []
+
+    let currentEl = el
+
+    while (currentEl) {
+        if (currentEl._x_refs) refObjects.push(currentEl._x_refs)
+
+        currentEl = currentEl.parentNode
+    }
+
+    return refObjects
+}

tests/cypress/integration/magics/$refs.spec.js

@@ -51,3 +51,29 @@ test('can reference elements outside of x-init',
         get('span').should(haveText('bar'))
     }
 )
+
+test('can reference refs of parent scope',
+    html`
+        <div x-data x-ref="foo" data-foo="bar">
+            <div x-data>
+                <span x-text="$refs.foo.dataset.foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('bar'))
+    }
+)
+
+test('when referencing refs from parent scope, the closest ref is used',
+    html`
+        <div x-data x-ref="foo" data-foo="bar">
+            <div x-data x-ref="foo" data-foo="baz">
+                <span x-text="$refs.foo.dataset.foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('baz'))
+    }
+)