Skip to content

Commit 385a87f

Browse files
authored
docs(your-first-component): minor copy edits
1 parent 03d2909 commit 385a87f

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

docs/_guide/your-first-component.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class HelloWorldElement extends HTMLElement {
2020

2121
Catalyst will automatically convert the classes name; removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
2222

23-
By convention, Catalyst controllers end in `Element`, and Catalyst will strip this for the tag name, but the `Element` suffix is not required - just convention. All examples in this guide use `Element` suffixed names.
23+
By convention Catalyst controllers end in `Element`; Catalyst will omit this when generating a tag name. The `Element` suffix is _not_ required - just convention. All examples in this guide use `Element` suffixed names.
2424

2525
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
2626
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
@@ -44,10 +44,10 @@ Remember! A class name _must_ include at least two CamelCased words (not includi
4444
The `@controller` decorator doesn't do all that much. Catalyst components are just "Custom Elements" under the hood, and the `@controller` decorator saves you writing some boilerplate that you'd otherwise have to write by hand. Specifically the `@controller` decorator:
4545

4646
- Derives a tag name based on your class name, removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
47-
- Calls `window.customElements.register` with your class, and the newly tag name.
47+
- Calls `window.customElements.register` with the newly derived tag name and your class.
4848
- Injects a call to `bind(this)` inside of the `connectedCallback()` of your class; this ensures that as your element connects it picks up any `data-action` handlers. See [actions](/guide/actions) for more on this.
4949

50-
You can opt to do this all manaully. For example here's the above `HelloWorldElement`, written without the `@controller` annotation:
50+
You can do all of this manually; for example here's the above `HelloWorldElement`, written without the `@controller` annotation:
5151

5252
```js
5353
import {bind} from '@github/catalyst'

0 commit comments

Comments
 (0)