Skip to content

Instantly share code, notes, and snippets.

@janwirth
Last active March 4, 2022 16:04
Show Gist options
  • Save janwirth/6f1c3cb2723ef2eed578c1d695447533 to your computer and use it in GitHub Desktop.
Save janwirth/6f1c3cb2723ef2eed578c1d695447533 to your computer and use it in GitHub Desktop.
Fix elm breaking when dom nodes are modified POC
// run here in iframe scope for demo: https://elm-lang.org/examples/buttons
const vdomParent = document.querySelector('div')
const vdomChild = document.querySelector('div div')
const slot = document.body
console.log(vdomParent.childNodes)
console.log('child', vdomParent.childNodes[0])
const applySlots = () => {
const proxyChild = document.createElement('slot-replaced')
proxyChild.innerHTML = "SLOT"
vdomParent.replaceChild(proxyChild, vdomChild)
console.log('child after move', vdomParent.childNodes[0])
slot.appendChild(vdomChild)
vdomParent.childNodes_ = vdomParent.childNodes
Object.defineProperty(vdomParent, 'childNodes', {get (a, b) {
return (Array.from(this.childNodes_).map(ch => ch.tagName == "SLOT-REPLACED"? vdomChild : ch))
return this.childNodes_
}, set (v) {
this.childNodes_ = v
}})
}
applySlots()
console.log('children with new getter', vdomParent.childNodes)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment