Re: [WICG/webcomponents] Need a callback for when children changed or parser finished parsing children (#809)

> if you define your component at the end of the page you are 100% sure you can access its children and everything else as it gets just "_promoted_" as CE ... if you define your component AOT (which is 90% of what libraries do instead of lazy dafining their components only when needed/encountered) you are 100% sure (last time I've checked) the `connectedCallback` will trigger instantly after `attributeChangedCallback` in case it was defined and the attribute is observed and encountered ... at that point the browser hasn't parsed yet the content of that element so you'll fallback with MutationObserver for children which guarantees nothing but usually it works "_good enough_".

Often you have components that need to be loaded quickly, e.g. if they are above the fold. Putting them last on the page does not work in this case. It's kind of like putting your stylesheets just your closing `</body>`.

For now I make a function that handles slotted children, that function has to be idempotent.
When the component is connected:
1. I setup a eventHandler for `slotchange`, that calls this function, `this.addEventListener('slotchange', this.slotChangeHandler.bind(this))`
2. Set a zero wait timeout to call this function almost immediately, e.g. `setTimeout(this.slotChangeHandler.bind(this))`

This handles the situation when the children are added before the component can initialise, and when they are slotted after it has been initialised. A bit clunky but don't know of any better.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/809#issuecomment-2036443551
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/809/2036443551@github.com>

Received on Thursday, 4 April 2024 07:54:37 UTC