自定义WebComponent继承报错：Uncaught ReferenceError: LinkedProducts未定义

报错Uncaught ReferenceError: LinkedProducts is not defined的核心原因是模块作用域隔离：Parcel默认会把每个JS文件当作ES模块处理，模块内部的类、变量默认只在当前文件生效，不会暴露到全局作用域。哪怕打包后LinkedProducts的代码先执行，ProductItem所在文件也无法直接访问另一个模块里的类。

修复步骤 #

1. 导出LinkedProducts类
   在LinkedProducts所在的文件中，给类加上export关键字，让它可以被其他模块导入：

   export class LinkedProducts extends HTMLElement {
     constructor() {
       super();
     }
   }
   
   customElements.define('linked-products', LinkedProducts);
   

2. 导入LinkedProducts类
   在ProductItem所在的文件中，通过import语句引入LinkedProducts（注意替换为实际文件相对路径）：

   import { LinkedProducts } from './linked-products.js'; // 路径根据你的文件结构调整
   
   class ProductItem extends LinkedProducts {
     constructor() {
       super();
     }
   }
   
   customElements.define('product-item', ProductItem);
   

3. 确保Parcel正确解析依赖
   只要你的项目入口文件（比如index.js）间接或直接引入了这两个模块，Parcel会自动处理打包顺序和依赖关系，不需要手动调整加载顺序。

不推荐的备选方案（全局作用域） #

如果暂时不想用模块系统，也可以把LinkedProducts挂到全局window对象上，但这种方式不符合现代JS模块化规范，不建议长期使用：

// LinkedProducts文件
class LinkedProducts extends HTMLElement {
  constructor() {
    super();
  }
}

window.LinkedProducts = LinkedProducts;
customElements.define('linked-products', LinkedProducts);

内容的提问来源于stack exchange，提问作者Tobias Madsen