Update documentation for working without decorators (#7129)

# Pull Request

## 📖 Description

After looking into #7128 it was discovered that actually the updated syntax for adding attributes was never updated in the documentation. This is therefore not a bug fix, but a documentation update.

### 🎫 Issues

Resolves #7128 

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [ ] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

## ⏭ Next Steps

- Run an update to push the change to the documentation site

Author: janechu

sites/website/src/docs/advanced/working-without-decorators.md

@@ -8,23 +8,21 @@ keywords:
 
 Most of our documented examples include the use of TypeScript decorators. However, as decorators are an unimplemented feature in JavaScript, using them may not be right for your project. See [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/decorators.html) for details on our implementation.
 
-The static `definition` accepts the same configuration options as the `@attr` decorator. For example, to bind a property name that is different from an attribute name:
+When defining your component, you may pass in attributes in the same configuration object as the name, template, and styles:
 
 ```javascript
 import { FASTElement, html, css } from '@microsoft/fast-element';
 
 export class MyElement extends FASTElement {
-  static definition = {
+  // component logic
+}
+
+MyElement.define({
     name: 'my-element',
     template: html`<div>${(x) => x.count}</div>`,
     styles: css`div { background: red }`,
-    attributes: [
-      'count',
-    ],
-  };
-}
-
-FASTElement.define(MyElement);
+    attributes: ['count'],
+});
 ```
 
 ```html
@@ -37,22 +35,24 @@ This accepts the same configuration options as the `@attr` so for example to bin
 import { FASTElement, html, css } from '@microsoft/fast-element';
 
 export class MyElement extends FASTElement {
-  static definition = {
-    name: 'my-element',
-    template: html`<div>${(x) => x.currentCount}</div>`,
-    styles: css`div { background: red }`,
-    attributes: [
-      {
-        attribute: 'current-count',
-        property: 'currentCount'
-      },
-    ],
-  };
-  
   currentCount = 42;
 }
 
-FASTElement.define(MyElement);
+MyElement.define({
+  name: 'my-element',
+  template: html`<div>${(x) => x.currentCount}</div>`,
+  styles: css`div { background: red }`,
+  attributes: [
+    {
+      attribute: 'current-count',
+      property: 'currentCount'
+    },
+  ],
+});
+```
+
+```html
+<my-element current-count="42">
 ```
 
 If you need to add a converter to your attribute:
@@ -70,21 +70,19 @@ const converter = {
 };
 
 export class MyElement extends FASTElement {
-  static definition = {
-    name: 'my-element',
-    template: html`<div>${(x) => x.currentCount}</div>`,
-    styles: css`div { background: red }`,
-    attributes: [
-      {
-        attribute: 'current-count',
-        property: 'currentCount',
-        converter
-      },
-    ],
-  };
-  
   currentCount = 42;
 }
 
-FASTElement.define(MyElement);
+MyElement.define({
+  name: 'my-element',
+  template: html`<div>${(x) => x.currentCount}</div>`,
+  styles: css`div { background: red }`,
+  attributes: [
+    {
+      attribute: 'current-count',
+      property: 'currentCount',
+      converter
+    },
+  ],
+});
 ```