微前端之 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')