diff --git a/docs/_guide/targets.md b/docs/_guide/targets.md index f52dd3de..22a38589 100644 --- a/docs/_guide/targets.md +++ b/docs/_guide/targets.md @@ -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: diff --git a/docs/_guide/your-first-component.md b/docs/_guide/your-first-component.md index 5b6348d7..338a46d0 100644 --- a/docs/_guide/your-first-component.md +++ b/docs/_guide/your-first-component.md @@ -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'