diff --git a/docs/_guide/actions.md b/docs/_guide/actions.md
index 86e4b734..0c11a2bf 100644
--- a/docs/_guide/actions.md
+++ b/docs/_guide/actions.md
@@ -27,21 +27,21 @@ Remember! Actions are _automatically_ bound using the `@controller` decorator. T
```html
-
+
+ data-target="hello-world.output">
-
+
```
@@ -51,7 +51,7 @@ Remember! Actions are _automatically_ bound using the `@controller` decorator. T
import { controller, target } from "@github/catalyst"
@controller
-class HelloController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@target nameTarget: HTMLElement
@target outputTarget: HTMLElement
@@ -78,40 +78,40 @@ The actions syntax follows a pattern of `event:controller#method`.
Multiple actions can be bound to multiple events, methods, and controllers. For example:
```html
-
-
+
+
-
-
+
+
```
### Custom Events
-A Controller may emit custom events, which may be listened to by other Controllers using the same Actions Syntax. There is no extra syntax needed for this. For example a `lazy-controller` may dispatch a `loaded` event, once its contents are loaded, and other controllers can listen to this event:
+A Controller may emit custom events, which may be listened to by other Controllers using the same Actions Syntax. There is no extra syntax needed for this. For example a `lazy-load` Controller may dispatch a `loaded` event, once its contents are loaded, and other controllers can listen to this event:
```html
-
+
-
+
```
@@ -123,7 +123,7 @@ Actions can always be bound to any method that is available on the Controller's
import {controller} from '@github/catalyst'
@controller
-class HelloController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
hidden = () => {
console.log('data-action cannot call this hidden method, but other JavaScript can!')
@@ -145,7 +145,7 @@ If you're not using decorators, then you'll need to call `bind(this)` somewhere
```
import {bind} from '@github/catalyst'
-class HelloController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
connectedCallback() {
bind(this)
diff --git a/docs/_guide/decorators.md b/docs/_guide/decorators.md
index fd55649a..39ef28ab 100644
--- a/docs/_guide/decorators.md
+++ b/docs/_guide/decorators.md
@@ -15,7 +15,7 @@ Catalyst comes with the `@controller` decorator. This gets put on top of the cla
```js
@controller
-class MyController extends HTMLElement {}
+class HelloWorldElement extends HTMLElement {}
```
### Class Field Decorators
@@ -23,7 +23,7 @@ class MyController extends HTMLElement {}
Catalyst comes with the `@target` and `@targets` decorators for more [read about Targets](/guide/targets). These get added on top or to the left of the field name, like so:
```js
-class MyController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@target something
@@ -43,7 +43,7 @@ Catalyst doesn't currently ship with any method decorators, but you might see th
```js
-class MyController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@log
submit() {
@@ -64,7 +64,7 @@ class MyController extends HTMLElement {
Some decorators are customisable - they get called with additional arguments, just like a function call. An example of this is the `@debounce` decorator in the [`@github/mini-throttle`](https://github.com/github/mini-throttle) package:
```js
-class MyController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@debounce(100)
handleInput() {
diff --git a/docs/_guide/targets.md b/docs/_guide/targets.md
index 2e4cff74..6336d5c6 100644
--- a/docs/_guide/targets.md
+++ b/docs/_guide/targets.md
@@ -15,11 +15,11 @@ To create a Target, use the `@target` decorator on a class field, and add the ma
```html
-
+
+ data-target="hello-world.output">
-
+
```
@@ -29,7 +29,7 @@ To create a Target, use the `@target` decorator on a class field, and add the ma
import { controller, target } from "@github/catalyst"
@controller
-class HelloController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@target outputTarget!: HTMLElement
greet() {
@@ -71,18 +71,18 @@ The `@target` decorator will only ever return _one_ element, just like `querySel
Elements can be referenced as multiple targets, and targets may be referenced multiple times within the HTML:
```html
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -91,7 +91,7 @@ Elements can be referenced as multiple targets, and targets may be referenced mu
import { controller, targets } from "@github/catalyst"
@controller
-class HelloController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
@targets readCheckbox!: HTMLElement
@targets writeCheckbox!: HTMLElement
@@ -110,7 +110,7 @@ If you're not using decorators, then you'll need to call `findTarget(this, key)`
```js
import {findTarget, findTargets} from '@github/catalyst'
-class MyController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
get outputTarget() {
return findTarget(this, 'outputTarget')
diff --git a/docs/_guide/your-first-component.md b/docs/_guide/your-first-component.md
index 05ee88f0..e9ed382a 100644
--- a/docs/_guide/your-first-component.md
+++ b/docs/_guide/your-first-component.md
@@ -6,14 +6,14 @@ chapter: 2
Custom Elements allow you to create reusable components that you can declare in HTML, and [progressively enhance](https://en.wikipedia.org/wiki/Progressive_enhancement) within JavaScript. Custom Elements must named with a `-` in the HTML name, and the JS class must `extend HTMLElement`. When the browser connects each element class instance to the DOM node, `connectedCallback` is fired - this is where you can change parts of the element. Here's a basic example:
```html
-
+
```
@@ -31,19 +31,19 @@ Catalyst saves you writing some of this boilerplate, by automatically calling th
```js
@controller
-class MyController extends HTMLElement {
+class HelloWorldElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello World!'
}
}
// No longer need this:
-// window.customElements.register('my-controller', MyController)
+// window.customElements.register('hello-world', HelloWorldElement)
```
-Catalyst will automatically "dasherize" the class name. All capital letters get lowercased and dash separated.
+Catalyst will automatically convert the classes name; removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
-By convention, Catalyst controllers end in `Controller`, but it's not required.
+By convention, Catalyst controllers end in `Element`, and Catalyst will strip this for the tag name, but suffixing `Element` is not required. All examples in this guide use `Element` suffixed names.
#### What about without Decorators?
@@ -51,7 +51,7 @@ If you don't want to use decorators, you can simply wrap the class in a call to
```js
controller(
- class MyController extends HTMLElement {
+ class HelloWorldElement extends HTMLElement {
//...
}
)
diff --git a/docs/index.html b/docs/index.html
index 25d835de..e0a4960b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,16 +28,16 @@