perf(extend): allow for custom component registration + extension

demo/demo.md

@@ -228,3 +228,29 @@ This feature should only to be used within environments where the REM values can
   ```
 
 </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-header` 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/@alaskaairux/auro-header';
+registerComponent('custom-header');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `auro-header` element.
+
+<div class="exampleWrapper">
+  <custom-header display="display">Salutations World!</custom-header>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <custom-header display="display">Salutations World!</custom-header>
+  ```
+
+</auro-accordion>

demo/index.html

@@ -26,6 +26,11 @@
         });
     </script>
     <script type="module" src="../src/auro-header.js"></script>
+    <script type="module">
+      import { registerComponent } from "../index.js"
+      registerComponent('custom-header');
+    </script>
+
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
   </body>
 </html>

index.js

@@ -1 +1,15 @@
-export * from './dist/auro-header';
+import { AuroHeader } from './src/auro-header';
+
+/**
+ * Register Custom Element.
+ * @param {Object} name - Name to use for custom element.
+ * @returns {void}
+ */
+ const registerComponent = (name = 'custom-header') => {
+  // alias definition
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends AuroHeader {});
+  }
+}
+
+export { registerComponent }

rollup.config.js

@@ -26,7 +26,7 @@ const getSharedPlugins = (isLegacy) => [
 ];
 
 const modernConfig = {
-  input: 'src/auro-header.js',
+  input: 'index.js',
   output: {
     format: 'esm',
     file: 'dist/auro-header__bundled.js'

src/auro-header.js

@@ -24,7 +24,7 @@ import styleCssFixed from './style-fixed-css.js';
  */
 
 // build the component class
-class AuroHeader extends LitElement {
+export class AuroHeader extends LitElement {
   constructor() {
     super();
 

test/auro-header.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-header.js';
+import '../src/auro-header';
 
 describe('auro-header', () => {
   it('sets the CSS class on auro-header', async () => {