class UserCard extends HTMLElement {
  static get observedAttributes() {return ['name', 'url']; }
  constructor() {
    super();
    // 可以創(chuàng)Shadom，通過this.shadowRoot獲取
    // this.attachShadow({ mode: 'open' })
  }
  connectedCallback (){
      console.log('鉤子，元素append到ducument觸發(fā)')
  }
  disconnectedCallback (){
      console.log('鉤子，元素從document刪除觸發(fā)')
  }
  // 只有observedAttributes 中監(jiān)聽的屬性name,url變化會觸發(fā)下面回調(diào)
  attributeChangedCallback (attr, oldVal, newVal){
      console.log('鉤子，元素屬性改變時觸發(fā)')
  }
}
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再訪問到內(nèi)部元素，closed就是完全不能訪問內(nèi)部元素
var shadowroot = element.attachShadow('open|closed')