Browse Source

Add $root in $el upgrade path

Caleb Porzio 4 years ago
parent
commit
b12831faf3
1 changed files with 18 additions and 0 deletions
  1. 18 0
      packages/docs/src/en/upgrade-guide.md

+ 18 - 0
packages/docs/src/en/upgrade-guide.md

@@ -40,6 +40,24 @@ Upgrading from Alpine V2 to V3 should be fairly painless. In many cases, NOTHING
 </div>
 </div>
 ```
 ```
 
 
+For a smoother upgrade experience, you can optionally replace all instances of `$el` with a custom magic called `$root`, then add the following code to your site to mimmick the behavior:
+
+```html
+<script>
+    document.addEventListener('alpine:initializing', () => {
+        Alpine.magic('root', el => {
+            let closestRootEl = (node) => {
+                if (node.hasAttribute('x-data')) return node
+
+                return closestRootEl(node.parentNode)
+            }
+
+            return closestRootEl(el)
+        })
+    })
+</script>
+```
+
 [→ Read more about $el in V3](/magics/el)
 [→ Read more about $el in V3](/magics/el)
 
 
 <a name="auto-init"></a>
 <a name="auto-init"></a>