css沙箱还有个思路就是将子项目的样式局限到子项目的容器范围内生效,这样只需要给不同的子项目不同的容器就可以了。但是这样也会有新的问题,子项目中append到body的弹窗,样式就无法生效。所以说样式污染还需要制定规范才行,约定class命名前缀。 四、微前端方案实践 改造已有的项目为qiankun子项目,由于我们是vue技术...
参考上面第二个链接,实现思路为在子应用unmount时,不调用vue或react的卸载事件,将rootDom append到document.body里面,并用样式隐藏,子应用重新mount时,将隐藏的rootDom显示 vue子应用 入口改造 ts复制代码let rootDom: Element | undefined; async function render(props: any) { console.log("render"); cons...
export default function patchDynamicAppend(mounting, proxy) { let dynamicStyleSheetElements = []; // 劫持插入函数 HTMLHeadElement.prototype.appendChild = function(element) { switch (element.tagName) { case LINK_TAG_NAME: // 如果是动态插入<style>标签到body上,则调整插入的位置到子应用挂载区 case ...
const iframe = document.createElement('iframe') document.body.append(iframe) const globalObj = iframe.contentWindow 创建一个全局代理对象的类 class GlobalProxy{ constructor(shareState) { return new Proxy(globalObj, { has: (target, prop) => { if(shareState.includes(prop)) { return false } if...
appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素. <body> <div class="MyDiv"> <h1 id="Myh1"> hello h1</h1> </div> <p> hello p1</p> <p> hello p2</p> <script src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $("p").app...
冲突 const shadow = subApp.attachShadow({ mode: "open" })//创建shadow dom,mode指是否可以通过js拿到子应用的dom shadow.innerHTML = ` <p>这是通过shadow dom添加的内容</p> //这里也可以放置style标签,设置shadow dom的样式 <style> p { color: green; } </style> ` </script> </body> </...
constiframe =document.createElement('iframe')document.body.append(iframe)constglobalObj = iframe.contentWindow 创建一个全局代理对象的类 classGlobalProxy{constructor(shareState) {returnnewProxy(globalObj, {has:(target, prop) =>{if(shareState.includes(prop)) {returnfalse}if(!target.hasOwnProperty(prop...
body.appendChild(n)}();</script> <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)...
新增:<qiankun-body>{template}</qiankun-body>容器。 新增:appInstanceMap用于存储 app 实例信息(最外层容器节点)。 注入:document,document.body,document.head打上标记(用于判断是否需要执行 patch) 补丁:Document\Element 原型链上的方法 DocumentElement ...
single-spa 方案中我用了换肤的思路来解决 css 污染:首先 css-scoped 解决大部分的污染,对于一些全局样式,在子项目给 body/html 加一个唯一的 id/class(正常开发部署用),然后这个全局的样式前面加上这个 id/class,而 single-spa 模式则在 mount 周期给 body/html 加上这个唯一的 id/class,在 unmount 周期...