如何观察 vanilla JS ES6 自定义元素中计算 css 属性的变化

Question

我正在尝试在 vanilla JS 中构建一个响应式自定义元素，该元素可以响应对其计算维度的更改。我已经成功地能够观察到明确定义的 properties/attributes 的变化。但是，我想知道是否可以观察自定义元素的计算属性的变化。例如：

class Custom_element extends HTMLElement {
  generate_html() {
    return `
        <style>
            :host {
                display:block;
            }          
            #element_wrapper {
                border: 1px solid grey;
                max-height     : 100%;
                max-width      : 100%; 
                min-height     : 100%;
                min-width      : 100%;            
            }
        </style>
        <div id="element_wrapper">
            <slot></slot>
        </div>
        `
  };

  constructor() {
    super();
    this.root = this.attachShadow({
      'mode': 'open'
    });
    this.root.innerHTML = this.generate_html();
  }

  static get observedAttributes() {
    return ['height', 'width'];
  }

  attributeChangedCallback(name, oldVal, newVal) {
    console.log(name, oldVal, newVal) //Is it possible to fire this when the css computed height/width properties change?
  }

}


window.customElements.define('custom-element', Custom_element);

#container {
  width: 100px;
  height: 100px;
}

#container:hover {
  width: 200px;
  height: 200px;
}

<div id='container'>
  <custom-element>
    Slot Content
  </custom-element>
</div>

是否可以在将鼠标悬停在#container 元素上并更改自定义元素的计算 height/width 时触发 attributeChangedCallback()？

Answer 1

正如@Bergi 在评论中指出的那样，ResizeObserver 正是我要找的。显然有一个 polyfill 可以帮助支持一些旧的浏览器。

如何观察 vanilla JS ES6 自定义元素中计算 css 属性的变化

How to observe changes of computed css properties in a vanilla JS ES6 custom element

javascript

css

dom

computed-style

custom-element