- 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