Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_guide/targets.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ subtitle: Querying Descendants

One of the three [core patterns]({{ site.baseurl }}/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.

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.
Catalyst Components are really just Web Components, so you could 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.

To create a Target, use the `@target` decorator on a class field, and add the matching `data-target` attribute to your HTML, like so:

Expand Down
4 changes: 2 additions & 2 deletions docs/_guide/your-first-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ defineObservedAttributes(HelloWorldElement)
window.customElements.define('hello-world', HelloWorldElement)
```

Using the `@controller` decorator saves on having to write this boilerplate for each element.
The `@controller` decorator saves on having to write this boilerplate for each element.

### What about without TypeScript Decorators?

If you don't want to use TypeScript decorators, you can use `controller` as a regular function, and just pass it your class:
If you don't want to use TypeScript decorators, you can use `controller` as a regular function by passing it to your class:

```js
import {controller} from '@github/catalyst'
Expand Down