1

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

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 元素上并更改自定义元素的计算高度/宽度时，是否可以触发 attributeChangedCallback()？

4

1 回答 1

1

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

于 2019-08-02T21:34:33.903 回答