New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Template contents are not replaced on merge #15
Comments
For anybody who runs into this, I am using this callback and it seems to fix the problem for me: Idiomorph.morph(e, this.templateContent, {
callbacks: {
afterNodeMorphed: (oldEl, newEl) => {
if (oldEl instanceof HTMLTemplateElement && newEl instanceof HTMLTemplateElement) {
oldEl.content.replaceChildren(...newEl.content.children);
}
}
}
}) |
hey caleb, would you mind contributing a test for this so I can see what you think should work? |
Sure thing, let me come up with a test. |
I'm running into a similar question with it('can morph a template tag properly', function()
{
let initial = parseHTML("<div><template>Foo</template></div>");
let finalSrc = '<div><template>Bar</template></div>';
let final = parseHTML(finalSrc);
Idiomorph.morph(initial.content, final.content);
initial.content.outerHTML.should.equal(finalSrc);
}); edit: This is what I get when I run try to run the tests:
|
Closes [bigskysoftware#15][] When morphing `<template>` elements, treat the [DocumentFragment][] instances returned from the [HTMLTemplateElement.content][] properties as `morphChildren` methods' `newParent` and `oldParent` variables. That way, descendant nodes can be iterated across the connected-disconnected boundary. [bigskysoftware#15]: bigskysoftware#15 [DocumentFragment]: [HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
Closes [bigskysoftware#15][] When morphing `<template>` elements, treat the [DocumentFragment][] instances returned from the [HTMLTemplateElement.content][] properties as `morphChildren` methods' `newParent` and `oldParent` variables. That way, descendant nodes can be iterated across the connected-disconnected boundary. [bigskysoftware#15]: bigskysoftware#15 [DocumentFragment]: [HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
Closes [bigskysoftware#15][] When morphing `<template>` elements, treat the [DocumentFragment][] instances returned from the [HTMLTemplateElement.content][] properties as `morphChildren` methods' `newParent` and `oldParent` variables. That way, descendant nodes can be iterated across the connected-disconnected boundary. [bigskysoftware#15]: bigskysoftware#15 [DocumentFragment]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment [HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
I've opened #49 to try and resolve this issue. |
I'm trying to merge two nodes that contain a
<template>
and after the merge the template contains the contents from the old node.Does it make sense to just replace template node's contents with the new version?
Here's a sandbox showing the issue:
https://codesandbox.io/s/immutable-tdd-mk7mtk?file=/src/index.mjs
Click the button and then use dev tools to inspect the DOM of the result panel.
The text was updated successfully, but these errors were encountered: