跨文件调用Web Component时import报Unexpected token '-'错误如何解决

数据老陈

2026-9-29

Uncaught SyntaxError: Unexpected token '-'

报错原因

最直接的诱因是import语句使用了不合法的标识符：JavaScript 的变量、导出对象属性名不允许包含连字符-，你写的import {my-element1}中的my-element1带横杠，JS解析时会将-识别为减号运算符，不符合语法规则，直接抛出该异常。
同时还存在多个关联错误：
1. element1.js未编写任何导出逻辑，即使标识符符合规则也无法正常导入内容
2. 导入路径书写错误：".element1.js"缺少相对路径标识斜杠，正确写法为./element1.js
3. 两个组件的构造函数都未先挂载Shadow Root，直接调用this.shadowRoot会得到null，语法错误解决后也会触发运行时错误。

解决方法

修改 element1.js

补充类导出逻辑，新增Shadow Root挂载步骤：

// 导出类供外部文件按需导入
export class Element1 extends HTMLElement {
 constructor() {
        super();
        // 挂载Shadow Root后才能正常操作this.shadowRoot
        this.attachShadow({mode: 'open'});
        const li = document.createElement('li');
        this.shadowRoot.append(li);        
    }
}

customElements.define('my-element1', Element1);

修改 element2.js

修正导入逻辑，补充Shadow Root挂载步骤：

// 无需导入标签名，Web Component全局注册后可直接使用，仅需导入文件触发注册逻辑即可
import './element1.js'

// 若后续需要用到Element1类，使用合法的类名导入即可
// import { Element1 } from './element1.js'

class Element2 extends HTMLElement {
 constructor() {
        super();
        this.attachShadow({mode: 'open'});
        const ol = document.createElement('ol');
        ol.appendChild(document.createElement('my-element1'));
        this.shadowRoot.append(ol);        
    }
}

customElements.define('my-element2', Element2);