获取嵌在聚合物纸对话框中的自定义web组件中内容的clientHeight

Question

我将尽可能清楚地解释我的问题。

我正在使用<paper-dialog>和<paper-dialog-scrollable>。

在<paper-dialog-scrollable>中，我有一个表单，它是一个自定义web-component。

在这种形式中，我使用了另一个自定义web-component，它扩展和折叠内容。

内容的默认状态被折叠。

在扩展组件中，我将内容的clientHeight保存在变量contentHeight中，并将内容的height设置为0。

我有一个函数toggle()，它在单击触发器时执行。

toggle()将内容height设置为contentHeight。

现在，当我单独使用我的表单或展开组件时，这是非常有效的，但是当它们嵌套在paper-dialog中时就不能工作了，因为clientHeight是0。

代码：

<paper-dialog with-backdrop style="min-width: 90%;">
   <paper-dialog-scrollable>
      <my-custom-form-component></my-custom-form-component>
   </paper-dialog-scrollable>
</paper-dialog>

来自<my-custom-form-component>的代码：

<div id="custom-expand-component-trigger"></div>
<custom-expand-component trigger="custom-expand-component-trigger">
   blabla a lot of content......
</custom-expand-component>

toggle()函数(在<custom-expand-component>中)：

function toggle(){
  if(!that.opened){
    content.style.height = contentHeight + 'px';  //contentHeight is 0 when form is nested in <paper-dialog>
  } else{
    content.style.height = startHeight;
  }
  that.opened = !that.opened;
}

有什么想法吗?即使我的表单在对话框中，我也能得到clientHeight吗？

我希望这是足够清楚的。

我们将非常感谢你的帮助。

Answer 1

隐藏元素的clientHeight为0，因此在呈现之前无法获得它。

实际上，当打开<paper-dialog>时，元素首先呈现。发生这种情况时，会触发iron-overlay-opened事件。如果您之前还没有设置正确的clientHeight，那么这是一个获得正确的的机会：

myDialog.addEventListener( "iron-overlay-opened", function ()
{
    this.querySelector( "custom-expand-component" ).init()
} )

在init()方法中，为私有变量设置正确的值：

var CEC = Object.create( HTMLElement.prototype )
CEC.createdCallback = function () {
    var that = this
    var startHeight
    var contentHeight 

    this.init = function () {
        if ( !contentHeight ) {
            contentHeight = this.clientHeight + "px"  //OK
            startHeight = this.getAttribute( "start-height" )
            opened = false                  
            this.style.height = startHeight
        }
    }

    document.getElementById( this.getAttribute( "trigger" ) ).onclick = toggle

    function toggle() {
        opened = !opened
        that.style.height = ( opened )? contentHeight : startHeight
    }
}
document.registerElement( "custom-expand-component", { prototype: CEC } )

CSS过渡现在正在进行：

custom-expand-component {
    display: block ;
    overflow-y: scroll ;
    transition: height 0.5s ;
}