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);