refine docs around your first component and how controller works

Author: keithamus

docs/_guide/your-first-component.md

@@ -42,24 +42,21 @@ The `@controller` decorator ties together the various other decorators within Ca
 
  - Derives a tag name based on your class name, removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
  - Calls `window.customElements.define` with the newly derived tag name and your class.
- - Calls `defineObservedAttributes` with the class to add map any `@attr` decorators. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
- - Injects the following code inside of the `connectedCallback()` function of your class:
-   - `bind(this)`; ensures that as your element connects it picks up any `data-action` handlers. See [actions]({{ site.baseurl }}/guide/actions) for more on this.
-   - `initializeAttrs(this)`; ensures that your element binds any `data-*` attributes to props. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
+ - Loads the `attrable` decorator, which provides the ability to define `@attr` decorators. See [attrs]({{ site.baseurl }}/guide/attrs) for more on this.
+ - Loads the `actionable` decorator, which provides the ability to bind actions. See [actions]({{ site.baseurl }}/guide/actions) for more on this.
+ - Loads the `targetable` decorator, which provides Target querying. See [targets]({{ site.baseurl }}/guide/targets) for more on this.
 
 You can do all of this manually; for example here's the above `HelloWorldElement`, written without the `@controller` annotation:
 
 ```js
-import {bind, initializeAttrs, defineObservedAttributes} from '@github/catalyst'
+import {attrable, targetable, actionable} from '@github/catalyst'
+
+@register
+@actionable
+@attrable
+@targetable
 class HelloWorldElement extends HTMLElement {
-  connectedCallback() {
-    initializeAttrs(this)
-    this.innerHTML = 'Hello World!'
-    bind(this)
-  }
 }
-defineObservedAttributes(HelloWorldElement)
-window.customElements.define('hello-world', HelloWorldElement)
 ```
 
 The `@controller` decorator saves on having to write this boilerplate for each element.