1  /* global HTMLElement, ResizeObserver, CustomEvent, customElements */
 2  
 3  class TrackedBox extends HTMLElement {
 4    constructor () {
 5      super()
 6  
 7      this.observer = new ResizeObserver(() => this.emitResize())
 8    }
 9  
10    connectedCallback () {
11      this.observer.observe(this)
12  
13      this.emitResize()
14    }
15  
16    disconnectedCallback () {
17      this.observer.unobserve(this)
18    }
19  
20    emitResize () {
21      const { x, y, width, height } = this.getBoundingClientRect()
22  
23      this.dispatchEvent(new CustomEvent('resize', { detail: { x, y, width, height } }))
24    }
25  }
26  
27  customElements.define('tracked-box', TrackedBox)