diff --git a/src/vaadin-dropdown-menu.html b/src/vaadin-dropdown-menu.html index 72c5e95e..bb010f4a 100644 --- a/src/vaadin-dropdown-menu.html +++ b/src/vaadin-dropdown-menu.html @@ -324,7 +324,6 @@ ready() { super.ready(); - this._overlayElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-overlay'); this._valueElement = this.shadowRoot.querySelector('[part="value"]'); this._toggleElement = this.shadowRoot.querySelector('[part="toggle-button"]'); this._nativeInput = this.focusElement.shadowRoot.querySelector('input'); @@ -335,8 +334,17 @@ this.focusElement.addEventListener('click', e => this.opened = !this.readonly); this.focusElement.addEventListener('keydown', e => this._onKeyDown(e)); - const template = this.querySelector('template'); + this._observer = new Polymer.FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes)); + this._observer.flush(); + } + + _setTemplateFromNodes(nodes) { + const template = Array.from(nodes).filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate; this._overlayElement.template = this._contentTemplate = template; + this._setForwardHostProps(); + } + + _setForwardHostProps() { if (this._overlayElement.content) { const origForwardHostProp = this._overlayElement._instance && this._overlayElement._instance.forwardHostProp; @@ -586,6 +594,13 @@ validate() { return !(this.invalid = !(this.disabled || !this.required || this.value)); } + + get _overlayElement() { + // TODO(yuriy): Ready and connected callbacks are called after property changes observers + // when content is rendererd with helper directive functions in lit-html, like repeat. + // Find a way to test it properly with other frameworks. + return this._savedOverlayElement || (this._savedOverlayElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-overlay')); + } } customElements.define(DropdownMenuElement.is, DropdownMenuElement);