基于JavaScript HTMLElement的移动端汉堡菜单图标实现故障求助

我正在为移动端网页制作汉堡菜单图标，采用JavaScript自定义HTMLElement的方式构建响应式头部，以此判断用户设备类型并节省空间。参考W3Schools的移动端导航栏教程编写代码，当屏幕宽度≤883px时注册自定义元素MyHeader，但在JS文件中实现时菜单按钮无法正常工作，将相同代码复制到HTML文件却能正常运行，CSS与教程完全一致，求助问题原因及解决方法。

相关代码：

if(screen.width <= 883){
    class MyHeader extends HTMLElement {
        connectedCallback() {
            this.innerHTML =
            `
            <header class="header">
                <a href="#default" class="logo">  <img src="logo.png" alt="home" width="100%"> </a>
            <div class="topnav">
                <div id="myLinks">
                    <a href="#">1page</a>
                    <a href="#">2page</a>
                    <a href="#">3page</a>
                    <a href="#">4page</a>
                    <a href="#">5page</a>
                </div>
              <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                  <i class="fa fa-bars"></i>
                    </a>
                 </div>
                <script>
                function myFunction() {
                var x = document.getElementById("myLinks");
                if (x.style.display === "block") {
                    x.style.display = "none";
                } else {
                    x.style.display = "block";
                }
                }
                </script>
            </div>
            </header>
            `
        }
    }
    customElements.define('my-header', MyHeader)
}

• 内联脚本作用域限制：自定义元素connectedCallback中插入的<script>里的myFunction，在外部JS文件中运行时，不会被挂载到全局window对象上，但内联onclick="myFunction()"调用的是全局作用域的函数，导致点击时找不到该函数。
• 自定义元素内部脚本执行环境差异：直接在HTML中插入脚本时，脚本会被解析到全局作用域；但自定义元素内部的脚本，其执行环境被隔离，无法直接注册全局函数。

方案一：移除内部脚本，在类内绑定事件（推荐） #

去掉内联onclick属性，在connectedCallback中通过JS获取元素并绑定点击事件，避免依赖全局作用域：

if(screen.width <= 883){
    class MyHeader extends HTMLElement {
        connectedCallback() {
            this.innerHTML =
            `
            <header class="header">
                <a href="#default" class="logo">  <img src="logo.png" alt="home" width="100%"> </a>
                <div class="topnav">
                    <div id="myLinks">
                        <a href="#">1page</a>
                        <a href="#">2page</a>
                        <a href="#">3page</a>
                        <a href="#">4page</a>
                        <a href="#">5page</a>
                    </div>
                    <a href="javascript:void(0);" class="icon">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
            </header>
            `;
            // 获取元素并绑定点击事件
            const iconBtn = this.querySelector('.icon');
            const myLinks = this.querySelector('#myLinks');
            iconBtn.addEventListener('click', () => {
                if (myLinks.style.display === "block") {
                    myLinks.style.display = "none";
                } else {
                    myLinks.style.display = "block";
                }
            });
        }
    }
    customElements.define('my-header', MyHeader);
}

方案二：将函数挂载到全局作用域（不推荐，易污染全局） #

如果要保留内联onclick，可以把myFunction定义在全局作用域：

// 全局定义函数
function myFunction() {
    var x = document.getElementById("myLinks");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

if(screen.width <= 883){
    class MyHeader extends HTMLElement {
        connectedCallback() {
            this.innerHTML =
            `
            <header class="header">
                <a href="#default" class="logo">  <img src="logo.png" alt="home" width="100%"> </a>
                <div class="topnav">
                    <div id="myLinks">
                        <a href="#">1page</a>
                        <a href="#">2page</a>
                        <a href="#">3page</a>
                        <a href="#">4page</a>
                        <a href="#">5page</a>
                    </div>
                    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
            </header>
            `;
        }
    }
    customElements.define('my-header', MyHeader);
}

额外优化：用CSS类切换控制显示（更规范） #

推荐通过添加/移除CSS类的方式控制菜单显示，替代直接操作style属性，便于维护：

/* 新增CSS类 */
#myLinks {
    display: block;
}
#myLinks.hidden {
    display: none;
}

修改JS中的事件逻辑：

iconBtn.addEventListener('click', () => {
    myLinks.classList.toggle('hidden');
});

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