Next.js静态导出组件嵌入WordPress为Web Component点击失效求助

你遇到的按钮点击失效问题，核心原因是：当通过innerHTML插入Next.js静态导出的HTML时，HTML中的<script>标签不会被浏览器自动执行——而Next.js组件的交互逻辑（包括点击事件）都依赖这些脚本完成初始化。iframe模式下浏览器会完整解析并执行页面所有脚本，所以功能正常。

修改你的Web Component代码，在插入HTML后手动提取并执行其中的脚本，同时确保脚本路径正确。以下是具体修改：

var widgetFormContact = "services-example-widget-contact";

class ServicesWidgetFormContact extends HTMLElement {
    constructor() {
        super();
        // 可选：启用Shadow DOM避免样式/脚本冲突，若需要的话取消注释
        // this.attachShadow({ mode: 'open' });
    }
    async connectedCallback() {
        const src = this.getAttribute('src');
        try {
            const response = await fetch(src);
            const html = await response.text();
            
            // 插入HTML到组件容器
            const container = this.shadowRoot || this;
            container.innerHTML = html;

            // 提取并执行HTML中的脚本
            const scriptElements = container.querySelectorAll('script');
            scriptElements.forEach(oldScript => {
                const newScript = document.createElement('script');
                // 复制原脚本的所有属性
                Array.from(oldScript.attributes).forEach(attr => {
                    newScript.setAttribute(attr.name, attr.value);
                });
                // 处理内联脚本内容
                if (oldScript.textContent) {
                    newScript.textContent = oldScript.textContent;
                }
                // 替换旧脚本，触发浏览器执行
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });
        } catch (error) {
            console.error('加载组件失败:', error);
        }
    }
}
customElements.define(widgetFormContact, ServicesWidgetFormContact);

• 确认Next.js的assetPrefix配置正确，脚本、样式等资源的路径能被WordPress页面正常访问。
• 如果启用Shadow DOM，Next.js组件的样式可能需要调整（比如使用:host选择器），避免被Shadow DOM隔离导致样式失效。
• 若组件依赖React等全局变量，要确保WordPress页面中没有版本冲突的React实例，或者让Next.js导出时打包独立的React副本。

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