@ before define:vars fix and an example

docs/api/define_vars.md

@@ -38,7 +38,7 @@ XElement serializes the data that you are sending into the client so its safe an
     const dolphins = "So long, and thanks for all the fish!"
 ---
     <Box
-        @define:vars={
+        define:vars={
             {
                 answer,
                 sum,
@@ -92,7 +92,7 @@ const list = ['joy','happy','fun']
 ---
 
 <Box 
-    @define:vars={
+    define:vars={
         {
             fancy,
             msg,
@@ -119,6 +119,36 @@ const list = ['joy','happy','fun']
 
 -------
 
+### Provides access to Astro.props
+
+When building a component for reuse, we often want to be able to pass in props for things like:
+* how the component should be styled
+* a target in the DOM to access once DOM is loaded
+
+`Astro.props` provides the mechanism for receiving said props and it's easy to just place those passed in props as attributes or `class:list` to your component. However, how do you get them into your `@do` decorator hook? You can use `define:vars` to achieve this feat easily:
+
+-------
+
+```astro
+
+---
+import XElement from 'astro-xelement'
+
+const { AgDialog } = XElement;
+const {dialogId, ...attrs} = Astro.props
+---
+
+<AgDialog
+  define:vars={{ dialogId }}
+  @do={() => {
+    const agDialogElement = document.getElementById(dialogId)
+    console.log('agDialogElement: ', agDialogElement);
+    // ...and so on
+  }}
+/>
+
+```
+
 ## Local Variables
 
 With `define:vars` you literally are defining the variable that are being sent across from Astro into the scope of the XElement. Its hoisted in the respects that it places these declared variables into the top of the element body.