Revert "Add $root refer to component root element"

This reverts commit db587d8.

Author: wusaby-rush

README.md

@@ -27,14 +27,6 @@
   {{ count }}
   <button @click="count++">inc</button>
 </div>
-
-<!-- another example -->
-<textarea
-  v-scope="{width: $root.offsetWidth, height: $root.offsetHeight}"
-  @click="width = $el.offsetWidth; height = $el.offsetHeight;"
->
-{{ width }} &times; {{ height }}
-</textarea>
 ```
 
 - Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`.
@@ -354,11 +346,10 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main
 - `v-scope`
 - `v-effect`
 - `@vue:mounted` & `@vue:unmounted` events
-- `$root` refer to component root element
 
 ### Has Different Behavior
 
-- In expressions, `$el` points to the current element the directive is bound to (instead of component root element which accessed by `$root`)
+- In expressions, `$el` points to the current element the directive is bound to (instead of component root element)
 - `createApp()` accepts global state instead of a component
 - Components are simplified into object-returning functions
 - Custom directives have a different interface

src/walk.ts

@@ -40,7 +40,6 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
     // v-scope
     if ((exp = checkAttr(el, 'v-scope')) || exp === '') {
       const scope = exp ? evaluate(ctx.scope, exp) : {}
-      scope.$root = el
       ctx = createScopedContext(ctx, scope)
       if (scope.$template) {
         resolveTemplate(el, scope.$template)

tests/ref.html

@@ -9,8 +9,7 @@
   v-scope="{ dynamicRef: 'x', show: true }"
   v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
 >
-  <p>Accessing root el (with ref): id is {{ $refs.root.id }}</p>
-  <p>Accessing root el (with $root): id is {{ $refs.root.id }}</p>
+  <p>Accessing root el: id is {{ $refs.root.id }}</p>
 
   <input ref="input" />
   <span v-if="show" :ref="dynamicRef">Span with dynamic ref</span>