SuperAPI AI 工具集

isolet-widget-isolation

通用与其它

查看项目

更新于 10-15 19:48

技能介绍

用途:isolet-js 用于把任意前端组件(React、Solid、Svelte、原生 JS 等)封装为自包含、样式隔离的 widget,便于嵌入宿主页面而不受全局样式干扰。

主要能力:默认在 shadow DOM 中渲染,样式完全作用域化;支持 shadow-dom、scoped、none 三种隔离模式;提供 createIsolet 核心 API,含 mount、update、unmount 及 container、shadowRoot、mounted 等实例属性;提供 React、vanilla 等框架适配器;支持 IIFE、ESM、CommonJS 输出格式;CLI 支持 init、build、--watch、--minify;构建时自动内联 CSS 与资源(字体、图片等转为 data URI),并可通过 ISOLET_CSS 注入样式。

使用方式:安装 npm install isolet-js;用 createIsolet({ name, mount, css, isolation, shadowMode, hostAttributes, zIndex }) 创建实例,再调用 widget.mount(target, props)、widget.update(props)、widget.unmount()。CLI 可用 npx isolet-js init 生成 isolet.config.ts,npx isolet-js build 打包。也可手动配置 Vite 插件 cssTextPlugin、inlineAssetsPlugin、autoStylesPlugin。IIFE 方式通过 script 标签加载,未设 globalName 时运行时暴露 globalThis.ISOLET。

适用场景:需要将组件嵌入第三方页面、避免样式冲突、按需懒加载挂载、z-index 浮层或弹窗、跨框架复用组件等。

限制:资料未提供收费、价格、平台兼容范围与效果数据;使用 external 时宿主需自行提供依赖;mount 回调需返回清理函数,否则 unmount 无法释放框架内部资源;ISOLET_CSS 仅在 CLI 构建且配置 styles 时注入。