litelemnt lifecycle issue

[hzmsrv]

in the litelemnt all the function could be call outside before shadowroot is implement

new= new element
new.call() // in call you could not query any node in shadowroot!

[danielbarion]

If you want to access elements inside render method in a lifecycle method like connectedCallback, you just need add a setTimeout and the elements will be accessibles.

Example:

connectedCallback() {
	super.connectedCallback()

	this.initializeRippleEffect()
}



initializeRippleEffect() {
	/**
	 * This function need to be inside a setTimeout
	 * function to access elements after render flow.
	 */
	setTimeout(() => {
		const rippleElements = this.shadowRoot.querySelectorAll('.ripple')

		if (rippleElements.length > 0) {
			rippleElements.forEach(element => {

				/**
				 * Add Ripple effect to selected element.
				 * If the element have `ripple-color` attribute,
				 * the ripple color effect will receive the color
				 * of the attribute.
				 */
				element.onclick = (event) => {
					let X = event.pageX - element.offsetLeft
					let Y = event.pageY - element.offsetTop
					let rippleDiv = document.createElement('div')

					rippleDiv.classList.add('ripple-effect')

					/**
					 * Create style
					 */
					const style =  {
						top: `${Y}px`,
						left: `${X}px`,
					}

					/**
					 * Add created style to rippleDiv
					 */
					Object.assign(rippleDiv.style, style)

					let customColor = element.getAttribute('ripple-color')

					if (customColor) {
						rippleDiv.style.background = customColor
					}

					element.appendChild(rippleDiv)

					/**
					 * Remove the created div
					 * after the effect finish (.88 sec)
					 */
					setTimeout(() => {
						rippleDiv.parentElement.removeChild(rippleDiv)
					}, 900)
				}
			})
		}
	})
}

[hzmsrv]

@danielbarion it could not change the order call() will before all the lifecycle func

#1 new= new element
#2 new.call() // in call you could not query any node in shadow root!

[hzmsrv]

lifecycle having problem i think.
normal when the element
#1 constructor
..... during this time parent node could not found this element. but it did!....
#2 connectedCallback()

normal order is below
#1 constructor
... any other lifecycle funcs
#2 ready()
#3 call()
but actually is #1 > #3 > #2 !!!

[danielbarion]

Oh, i got it now, my bad.. sorry for my answer.

[sorvell]

For efficiency, LitElement renders its DOM asynchronously. You can use the updateComplete Promise to know when the element has updated and rendered its DOM.

For example:

const el  = new MyEl();
el.updateComplete.then(() => {
  // act on element after it's been updated / rendered.
});

[hzmsrv]

but did the bug solve? the order still not correct!