Skip to content

Commit d2dc99f

Browse files
committed
docs: further clarify @target vs @targets
1 parent 2769369 commit d2dc99f

1 file changed

Lines changed: 10 additions & 1 deletion

File tree

docs/_guide/targets.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ chapter: 5
33
subtitle: Querying Descendants
44
---
55

6-
One of the three [core patterns](/guide/introduction#three-core-concepts-observe-listen-query) is Querying. In Catalyst, Targets are the preferred way to query. Targets use `querySelectorAll` under the hood, but in a way that makes it a lot simpler to work with.
6+
One of the three [core patterns](/guide/introduction#three-core-concepts-observe-listen-query) is Querying. In Catalyst, Targets are the preferred way to query. Targets use `querySelector` under the hood, but in a way that makes it a lot simpler to work with.
77

88
Catalyst Components are really just Web Components, so you could simply use `querySelector` or `querySelectorAll` to select descendants of the element. Targets avoid some of the problems of `querySelector`; they provide a more consistent interface, avoid coupling CSS classes or HTML tag names to JS, and they handle subtle issues like nested components. Targets are also a little more ergonomic to reuse in a class. We'd recommend using Targets over `querySelector` wherever you can.
99

@@ -112,6 +112,15 @@ class UserListElement extends HTMLElement {
112112
}
113113
```
114114

115+
### Target Vs Targets
116+
117+
To clarify the difference between `@target` and `@targets` here is a handy table:
118+
119+
| Decorator | Equivalent Native Method | Selector | Returns |
120+
|:-----------|:-------------------------|:-------------------|:-----------------|
121+
| `@target` | `querySelector` | `data-target="*"` | `Element` |
122+
| `@targets` | `querySelectorAll` | `data-target="*"` | `Array<Element>` |
123+
115124
### What about without Decorators?
116125

117126
If you're using decorators, then the `@target` and `@targets` decorators will turn the decorated properties into getters.

0 commit comments

Comments
 (0)