MicroApp

元素隔离

元素隔离的概念来自ShadowDom，即ShadowDom中的元素可以和外部的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离<micro-app>元素边界，子应用只能对自身的元素进行增、删、改、查的操作。

举个栗子🌰 :

主应用和子应用都有一个元素<div id='root'></div>，此时子应用通过document.querySelector('#root')获取到的是自己内部的#root元素，而不是主应用的。

主应用可以获取子应用的元素吗？

可以的！

这一点和ShadowDom不同，在微前端下主应用拥有统筹全局的作用，所以我们没有对主应用操作子应用元素的行为进行限制。

解除元素绑定

默认情况下，当子应用操作元素时会绑定元素作用域，而解绑过程是异步的，这可能会导致操作元素异常，此时有两种方式可以解决这个问题。

方式一：执行removeDomScope

removeDomScope方法可以解除元素绑定，通常用于受子应用元素绑定影响，导致主应用元素错误绑定到子应用的情况。

具体方式如下：

import { removeDomScope } from '@micro-zoe/micro-app'

// 解除元素绑定，并且一定时间内(一个微任务Promise时间)阻止再次绑定
removeDomScope(true)

const div = window.document.createElement('div')
// 插入到主应用body中
document.body.appendChild(div) 

// 解除元素绑定，并且一定时间内(一个微任务Promise时间)阻止再次绑定
window.microApp.removeDomScope(true) 

const div = window.rawDocument.createElement('div')
// 插入到主应用body中
document.body.appendChild(div)

方式二：使用setTimeout

// 等待解绑结束后操作元素
setTimeout(() => {
  const div = window.document.createElement('div')
  // 插入到主应用body中
  document.body.appendChild(div) 
}, 0)

// 记录主应用document
const rawDocument = window.rawDocument

// 等待解绑结束后操作元素
setTimeout(() => {
  const div = rawDocument.createElement('div')
  // 插入到主应用body中
  rawDocument.body.appendChild(div) 
}, 0)