使用Custom HTML Elements实现公共页头时VS Code报错问题求解

报错原因 #

1. JavaScript字符串语法错误 #

你给this.innerHTML赋值的HTML内容没有使用正确的字符串包裹符。JavaScript语法要求字符串必须用引号包裹，其中多行HTML内容推荐使用**反引号（`，键盘左上角ESC下方按键）**作为模板字符串的包裹符，你当前代码中直接裸写HTML标签，不符合JS语法规范，因此VS Code会抛出语法错误。

2. 额外可修复问题 #

你mainpage.html中的script标签属性拼写错误，scr需要改为src，否则浏览器无法正常加载JS文件，自定义组件也不会生效。

修正后的代码示例 #

mainmenu.js #

class mainmenu extends HTMLElement {
    connectedCallback() {
        // 使用反引号包裹多行HTML内容
        this.innerHTML = `
        <h1>
        test
        </h1>
        
        <header>
            <nav>
            <ul>
                <li><a href="#">Lists</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Purchases</a></li>
                <li><a href="#">Received</a></li>
                <li><a href="#">Payments</a></li>
                <li><a href="#">Adjustments</a></li>
                <li><a href="#">Reports</a></li>  
            </ul>
            </nav>
        </header>       
        `
    }
}

customElements.define('mainheader',mainmenu)

mainpage.html（修正script标签部分） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Page</title>
    <!--<link rel="stylesheet" href="style.css"> -->
    <!-- 修正scr为src，属性值添加引号更符合规范 -->
    <script type="module" src="mainmenu.js"></script>
</head>
<body>
    <mainheader></mainheader>
</body>
</html>

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