微前端之 js隔离 样式隔离 元素隔离问题详解

class UserCard extends HTMLElement {
  static get observedAttributes() {return ['name', 'url']; }
  constructor() {
    super();
    // 可以创Shadom，通过this.shadowRoot获取
    // this.attachShadow({ mode: 'open' })
  }
  connectedCallback (){
      console.log('钩子，元素append到ducument触发')
  }
  disconnectedCallback (){
      console.log('钩子，元素从document删除触发')
  }
  // 只有observedAttributes 中监听的属性name,url变化会触发下面回调
  attributeChangedCallback (attr, oldVal, newVal){
      console.log('钩子，元素属性改变时触发')
  }
}
window.customElements.define('user-card', UserCard);

const rawWindow = window
const proxyWindow = new Proxy({},{
    get: (target, key): unknown => {
        // 原 target 上有就返回，否则返回 rawWindow 属性
        return Reflect.has(target, key) ? Reflect.get(target, key) : Reflect.get(rawWindow, key)
    },
    set: (target, key, value): boolean => {
        if(!Object.prototype.hasOwnProperty.call(target, key) && Object.prototype.hasOwnProperty.call(rawWindow, key)){
            const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key)
            const { configurable, enumerable, writable, set } = descriptor!
            // set value because it can be set
            rawDefineProperty(target, key, {
              value,
              configurable,
              enumerable,
              writable: writable ?? !!set,
            })
        } else {
            Reflect.set(target, key, value)
        }
    }
})

;(function(window){
    window.r = 1
    window.addEventListener('click',()=>console.log('A'))
})(proxyWindowA)

;(function(window){
    window.r = 2
    window.addEventListener('click',()=>console.log('B'))
})(proxyWindowB)

//open 是外界可以访问到Element.shadowRoot再访问到内部元素，closed就是完全不能访问内部元素
var shadowroot = element.attachShadow('open|closed')