Skip to content

Commit

Permalink
Update README.md (#1158)
Browse files Browse the repository at this point in the history
  • Loading branch information
deebloo authored Jan 27, 2025
1 parent df63549 commit be66509
Showing 1 changed file with 33 additions and 4 deletions.
37 changes: 33 additions & 4 deletions packages/element/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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.

Expand All @@ -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 }
})
}
}
```

0 comments on commit be66509

Please sign in to comment.