1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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)

        }

    }

})

1

2

3

4

;(function(window){

    window.r = 1

    window.addEventListener('click',()=>console.log('A'))

})(proxyWindowA)

1

2

3

4

;(function(window){

    window.r = 2

    window.addEventListener('click',()=>console.log('B'))

})(proxyWindowB)

1

2

//open 是外界可以访问到Element.shadowRoot再访问到内部元素，closed就是完全不能访问内部元素

var shadowroot = element.attachShadow('open|closed')