渲染时模板内的Onclick Send Event JS被移除，求排查原因

为hits项模板添加了onclick事件，但渲染后该JS代码消失了。按钮其余部分渲染正常，仅JS代码被剥离。相关代码如下：

instantsearch.widgets.hits({
    container: "#hits",
    templates: {
        item: (hit, { html, sendEvent }) => html`
            <div class="product" data-id="${hit.objectID}">
                <a href="${hit.url}">
                    <img
                        src="${hit.thumbnail
                            ? hit.thumbnail
                            : "/wp-content/uploads/woocommerce-placeholder-150x150.png"}"
                        align="left"
                        alt="${hit.title}"
                    />
                </a>
                <div class="hit-name">
                    <h4>${hit.title}</h4>
                    <p>${hit.content}</p>
                    <button class="btn btn-primary"
                        onclick="${() =>
                            sendEvent("click", hit, "my-click-event")}"
                    >
                        Click event
                    </button>
                </div>
            </div>
        `,
        empty: "<div>No results have been found for {{ query }}</div>",
    },
}),

核心原因是InstantSearch底层使用的lit-html模板引擎会自动过滤内联事件处理器，这是内置的安全防护机制，用于防范XSS攻击，像onclick这类内联事件属性会被判定为不安全内容，直接被清理掉。

正确的解决方式是使用lit-html的原生事件绑定语法，而非内联onclick：

• 把onclick替换为@click
• 直接传递函数引用，不需要用字符串包裹

修改后的代码示例：

instantsearch.widgets.hits({
    container: "#hits",
    templates: {
        item: (hit, { html, sendEvent }) => html`
            <div class="product" data-id="${hit.objectID}">
                <a href="${hit.url}">
                    <img
                        src="${hit.thumbnail
                            ? hit.thumbnail
                            : "/wp-content/uploads/woocommerce-placeholder-150x150.png"}"
                        align="left"
                        alt="${hit.title}"
                    />
                </a>
                <div class="hit-name">
                    <h4>${hit.title}</h4>
                    <p>${hit.content}</p>
                    <button class="btn btn-primary"
                        @click=${() => sendEvent("click", hit, "my-click-event")}
                    >
                        Click event
                    </button>
                </div>
            </div>
        `,
        empty: "<div>No results have been found for {{ query }}</div>",
    },
}),

这种写法既符合lit-html的安全规则，也能正常触发点击事件并调用sendEvent方法。

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