backport PR 1563

docs/pages/resources/changelog.md

@@ -21,6 +21,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 
 ## Next
 
+- Fixed a bug in the autoloader causing it to register non-Shoelace elements [#1563]
 - Fixed a bug in `<wa-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
 - Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
 - Updated Bootstrap Icons to 1.11.0

src/autoloader.ts

@@ -15,13 +15,13 @@ const observer = new MutationObserver(mutations => {
  */
 export async function discover(root: Element | ShadowRoot) {
   const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : '';
-  const rootIsCustomElement = rootTagName?.includes('-');
+  const rootIsWebAwesomeComponent = rootTagName?.startsWith('wa-');
   const tags = [...root.querySelectorAll(':not(:defined)')]
     .map(el => el.tagName.toLowerCase())
     .filter(tag => tag.startsWith('wa-'));
 
-  // If the root element is an undefined custom element, add it to the list
-  if (rootIsCustomElement && !customElements.get(rootTagName)) {
+  // If the root element is an undefined Web Awesome component, add it to the list
+  if (rootIsWebAwesomeComponent && !customElements.get(rootTagName)) {
     tags.push(rootTagName);
   }
 
@@ -35,14 +35,14 @@ export async function discover(root: Element | ShadowRoot) {
  * Registers an element by tag name.
  */
 function register(tagName: string): Promise<void> {
-  const tagWithoutPrefix = tagName.replace(/^wa-/i, '');
-  const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
-
   // If the element is already defined, there's nothing more to do
   if (customElements.get(tagName)) {
     return Promise.resolve();
   }
 
+  const tagWithoutPrefix = tagName.replace(/^wa-/i, '');
+  const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
+
   // Register it
   return new Promise((resolve, reject) => {
     import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));