From fe516334b94f1d9197fe75bb7a3b5b484db60241 Mon Sep 17 00:00:00 2001
From: Danny Blue <deebloo@proton.me>
Date: Mon, 27 Jan 2025 09:01:53 -0500
Subject: [PATCH] Update README.md

---
 packages/element/README.md | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/element/README.md b/packages/element/README.md
index 5bf80449..0dff0750 100644
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -45,7 +45,8 @@ export class MyElement extends HTMLElement {
 ## HTML and CSS
 
 HTML templates can be applied by passing the result of the `html` tag to the shaodw list.
-CSS can be applied by passing the result of the `css` tag to the shadow list.
+CSS can be applied by passing the result of the `css` tag to the shadow list. 
+Any new tagged template literal that returns a `ShadowResult` can be used.
 
 ```ts
 @element({
@@ -94,7 +95,7 @@ export class MyElement extends HTMLElement {
 }
 ```
 
-## Queries
+## Query
 
 The `query` function will query for a particular element and allow you to easily patch that element with new properties.
 
@@ -119,8 +120,36 @@ export class MyElement extends HTMLElement {
 
   @effect()
   onChange() {
-    const input = this.#input();
-    input.value = this.value;
+    const input = this.#input({ value: this.value});
+  }
+}
+```
+
+## QueryAll
+
+The `queryAll` function will get all elements that match the given query. A patching function can be passed to update any or all items in the list
+
+```ts
+@element({
+  tagName: 'my-element',
+  shadowDom: [
+    html`
+      <input id="first" />
+      <input id="second" />
+    `
+  ]
+})
+export class MyElement extends HTMLElement {
+  @observe()
+  value: string;
+
+  #inputs = queryAll('input');
+
+  @effect()
+  onChange() {
+    this.#input(() => {
+      return { value: this.value }
+    })
   }
 }
 ```