必须启用自定义代码并上传index.js等资源，通过自定义HTML组件+renderUI钩子+scoped CSS实现高度可控、逻辑可复用的交互效果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在扣子平台中实现界面高度可控、逻辑可复用的交互效果，必须脱离纯拖拽式组件堆砌，进入自定义前端组件与渲染层介入阶段。
在扣子中接入自定义前端组件
第一步：进入「工作空间 → 项目开发 → 已创建的应用 → 用户界面」，点击右上角「代码模式」切换按钮，确认弹窗中选择「启用自定义代码」并保存。
第二步：在左侧资源面板展开「前端资源」→「JS/CSS/HTML」，点击「+ 添加资源」，上传已打包的组件构建产物（如 dist 目录下的 index.js + style.css）；【文件名必须为 index.js，否则无法被识别为入口】。
第三步：回到「用户界面」画布，拖入「自定义 HTML 组件」，在右侧属性面板的「HTML 内容」栏中填入基础容器标签，例如：<div id="my-custom-button"></div>。
立即学习“前端免费学习笔记（深入）”；
第四步：在「JS 脚本」区域（非 HTML 内容框）粘贴初始化逻辑，确保 DOM 就绪后再挂载组件：
document.addEventListener('DOMContentLoaded', () => {
if (window.MyButtonComponent) {
new window.MyButtonComponent('#my-custom-button');
}
});
使用 render props 实现动态界面渲染
扣子原生支持通过 props 注入运行时上下文，从而驱动自定义 UI 渲染逻辑。核心是利用 props.renderUI 函数作为渲染钩子。
方法一：基础 renderUI 调用
在自定义 HTML 组件的 JS 脚本区写入：
const render = props.renderUI || ((data) => `
document.getElementById('render-root').innerHTML = render({ user: '张三', status: 'active' });
方法二：绑定交互响应
在 renderUI 返回的 DOM 中嵌入事件监听器，但注意必须用委托方式绑定到根容器，因为扣子会高频重绘子节点：
const container = document.getElementById('render-root');
container.innerHTML = render({ onToggle: () => console.log('触发了外部 toggle') });
container.addEventListener('click', e => {
if (e.target.dataset.action === 'toggle') {
props.onToggle && props.onToggle();
}
});
【props.onToggle 是扣子注入的函数，不可自行声明同名变量覆盖】
覆盖默认样式并注入 scoped CSS
第一步：在「前端资源」中上传一个 CSS 文件，命名为 custom-scope.css，内容需带唯一命名空间前缀，例如：
.coze-ns-button { padding: 8px 16px; border-radius: 4px; }
.coze-ns-button:hover { opacity: 0.9; }
第二步：在自定义 HTML 组件的「HTML 内容」中，给根元素添加对应 class：<div class="coze-ns-button" data-action="toggle">点击我</div>
第三步：确保该 CSS 文件已在「JS/CSS/HTML」资源列表中启用——勾选左侧资源项后的开关按钮，未启用则样式不会加载。
这一步操作起来很简单，直接把文件拖进去就行。但若跳过命名空间前缀，CSS 极易污染扣子全局样式，导致标签栏、输入框等原生组件错位或变色。
调试自定义组件的实时 DOM 结构
① 在应用预览页打开浏览器开发者工具（F12），切换到「Elements」面板；
② 使用 Ctrl+F（Windows）或 Cmd+F（Mac）搜索关键词 coze-ns-，快速定位你注入的自定义节点；
③ 右键目标元素 →「Break on」→「attribute modifications」，当扣子内部更新 props 或重绘时，JS 执行会自动暂停，便于查看当前 props 值；
④ 在 Console 中输入 props，可直接读取当前上下文对象（仅限开发预览环境，发布后不可见）。
