- From: Jose Vargas <notifications@github.com>
- Date: Mon, 06 Mar 2023 14:30:38 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/809/1457119856@github.com>
After playing around a little bit, the mutation observer really seems like the best option for the component to be aware of its children. ```js <script> window.customElements.define( 'elmt-container', class extends HTMLElement { observeMutations() { const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === 'childList') { if (mutation.addedNodes) { if (mutation.addedNodes[0] instanceof HTMLElement) { console.log('A child node has been added:') console.log(mutation.addedNodes[0]) } } } } } const observer = new MutationObserver(callback) this.observer = observer const config = { childList: true, subtree: true } observer.observe(this, config) } disconnectedCallback() { const observer = this.observer observer.disconnect() } constructor() { super() this.observeMutations() } } ) window.customElements.define('elmt-test', class extends HTMLElement {}) </script> <elmt-container> <div>1</div> <elmt-test>2</elmt-test> <div><span>3</span></div> </elmt-container> ``` The funny thing is that this still doesn't signal when the parser "finished first pass" or whatever. So instead the CustomElement has to carefully count/wait/expect the child nodes that it depends on. -- Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/809#issuecomment-1457119856 You are receiving this because you are subscribed to this thread. Message ID: <WICG/webcomponents/issues/809/1457119856@github.com>
Received on Monday, 6 March 2023 22:30:51 UTC