Expose $el to v-scope

Author: ws-rushx

examples/components.html

@@ -0,0 +1,45 @@
+<script type="module">
+import { createApp } from '../src'
+
+export class MyCounter extends HTMLElement {
+  data() {
+    return {
+      count: 0,
+    }
+  }
+
+  connectedCallback() {
+    this.setAttribute('v-scope', "$el.data()")
+    this.innerHTML = `
+      <style>
+        * {
+          font-size: 100%;
+        }
+        
+        span {
+          width: 4rem;
+          display: inline-block;
+          text-align: center;
+        }
+
+        button {
+          width: 4rem;
+          height: 4rem;
+          border: none;
+          border-radius: 10px;
+          background-color: seagreen;
+          color: white;
+        }
+      </style>
+      <button @click="count--">-</button>
+      <span v-text="count"></span>
+      <button @click="count++">+</button>
+    `
+  }
+}
+
+customElements.define("my-counter", MyCounter)
+createApp().mount()
+</script>
+
+<my-counter />

src/walk.ts

@@ -40,7 +40,7 @@ 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) : {}
+      const scope = exp ? evaluate(ctx.scope, exp, el) : {}
       scope.$root = el 
       ctx = createScopedContext(ctx, scope)
       if (scope.$template) {