perf(docs): add custom registration example to index page

apiExamples/custom.html

@@ -0,0 +1,4 @@
+<custom-button>Primary</custom-button>
+<custom-button variant="secondary">Secondary</custom-button>
+<custom-button variant="tertiary">Tertiary</custom-button>
+

demo/index.html

@@ -29,6 +29,11 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
+    <script type="module">
+      import { registerComponent } from '../index.js';
+
+      registerComponent('custom-button');
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>

demo/index.md

@@ -219,4 +219,38 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 </auro-alert>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+
+```js
+import './node_modules/@aurodesignsystem/auro-button';
+registerComponent('custom-button');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
+  <custom-button>Primary</custom-button>
+  <custom-button variant="secondary">Secondary</custom-button>
+  <custom-button variant="tertiary">Tertiary</custom-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
+```html
+<custom-button>Primary</custom-button>
+<custom-button variant="secondary">Secondary</custom-button>
+<custom-button variant="tertiary">Tertiary</custom-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

docs/partials/index.md

@@ -133,3 +133,29 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+## Recommended Use and Version Control
+
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+
+```js
+import './node_modules/@aurodesignsystem/auro-button';
+registerComponent('custom-button');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>

index.js

@@ -11,6 +11,3 @@ export function registerComponent(name) {
     customElements.define(name, class extends AuroButton {});
   }
 }
-
-// Example custom registration
-// registerComponent('my-button');