部署和隔离 webapp 小部件 项目规格：安装目前考虑了什么

问题描述

我目前在工作中遇到了有关此项目的困境，场景如下：

我们正在构建一个可嵌入的 React 小部件聊天机器人应用程序。它将用于至少 20 多个客户的电子商务网站。

项目规格：

• Preact、preact/compat（必须是轻量级的）
• styled-components（将所有内容打包成一个包，不需要 css 文件）

安装

安装过程需要尽可能无缝：

1. 客户端导入编译好的包 <script src="https:...bundle.js">
2. 为小部件提供入口点：<div id="chatbot"></div>

主要问题：

• 客户端可能有标签覆盖 CSS，例如：p { margin: 5px }

目前考虑了什么

1. 封装成 iframe：injecting html into iframe。 可能的缺点：浏览器安全问题。我需要访问父文档才能推送分析数据。

2. shadowDOM: 。可能的缺点：我需要独立的 PWA 功能，而不会弄乱客户端网站。

有什么想法吗？利弊？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）