perf(docs): add custom registration example

apiExamples/custom.html

@@ -0,0 +1,3 @@
+<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
+<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
+<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>

demo/index.html

@@ -41,6 +41,11 @@
         });
     </script>
     <script type="module" data-demo-script="true" src="../index.js"></script>
+    <script type="module">
+      import { registerComponent } from '../index.js';
+
+      registerComponent('custom-skeleton');
+    </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/index.md

@@ -120,4 +120,38 @@ Use your imagination. Wherever data can be placed, an `<auro-skelelton>` element
 </table>
 ```
 <!-- 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-skeleton` 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-skeleton';
+registerComponent('custom-skeleton');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` 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-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
+  <custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
+  <custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
+  <!-- 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-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
+<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
+<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

docs/partials/index.md

@@ -53,3 +53,35 @@ Use your imagination. Wherever data can be placed, an `<auro-skelelton>` element
 <!-- 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-skeleton` 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-skeleton';
+registerComponent('custom-skeleton');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` 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-skeleton></custom-skeleton>
+  <custom-skeleton bordered></custom-skeleton>
+  <!-- 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-skeleton></custom-skeleton>
+<custom-skeleton bordered></custom-skeleton>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>