From 3464cc367ca7f6c2e2f4c885cbcee1c011bb05db Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Tue, 20 Feb 2024 21:15:54 -0800
Subject: [PATCH] perf(docs): add custom reg example

---
 apiExamples/custom.html |  4 ++++
 demo/index.html         |  5 +++++
 demo/index.md           | 36 ++++++++++++++++++++++++++++++++++++
 docs/partials/index.md  | 23 +++++++++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 apiExamples/custom.html

diff --git a/apiExamples/custom.html b/apiExamples/custom.html
new file mode 100644
index 0000000..029ba38
--- /dev/null
+++ b/apiExamples/custom.html
@@ -0,0 +1,4 @@
+<custom-lockup>
+  <span slot="title">Place title text here</span>
+  <span slot="subtitle">Place subtitle text here</span>
+</custom-lockup>
diff --git a/demo/index.html b/demo/index.html
index 61dfd7b..df3836e 100644
--- a/demo/index.html
+++ b/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-lockup');
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/demo/index.md b/demo/index.md
index 587a00d..5e52ff1 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -136,4 +136,40 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
 <auro-lockup onDark standard oneworld></auro-lockup>
 ```
 <!-- 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-lockup` 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-lockup';
+registerComponent('custom-lockup');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` 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-lockup>
+    <span slot="title">Place title text here</span>
+    <span slot="subtitle">Place subtitle text here</span>
+  </custom-lockup>
+  <!-- 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-lockup>
+  <span slot="title">Place title text here</span>
+  <span slot="subtitle">Place subtitle text here</span>
+</custom-lockup>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/docs/partials/index.md b/docs/partials/index.md
index e992fbd..67d3557 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -99,3 +99,26 @@ For lockup use with dark backgrounds or a dark mode, use the `onDark` attribute.
 <!-- 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-lockup` 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-lockup';
+registerComponent('custom-lockup');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-lockup>` 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>