Skip to content

Add test for templateElement.content.childNodes[0].replaceWith #279

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

Add test for templateElement.content.childNodes[0].replaceWith #279

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions test/html/template-element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,11 @@ const docWithTemplateAttribute = parseHTML(`<div template="anything"><p>not insi

assert(docWithTemplateAttribute.querySelector('*').tagName, 'P');
assert(docWithTemplateAttribute.querySelectorAll('*').length, 1);


let {document: document2} = parseHTML('<template><img id="el-14" class="has-svg" src="./favicon.svg" inline=""></template>');
let template2 = document2.documentElement;
assert(template2.innerHTML, '<img id="el-14" class="has-svg" src="./favicon.svg" inline="">');

template2.content.childNodes[0].replaceWith(document.createElement('br'))
Copy link
Author

@iacore iacore Jun 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you save content here,

const content = template2.content

content.toString() will give the correct content.

template2.content.innerHTML still won't.

Copy link
Owner

@WebReflection WebReflection Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, live nodes are not a thing in here ... and won't be because that's not a goal of this project.

Copy link
Owner

@WebReflection WebReflection Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify: I don't know if content returns an array of its nodes but if that's the case, that's gonna be the case in here. For everything else, JSDOM got you covered. This project is not a replacement for it, it just enables the read-only things a page would land, everything else really need a good use case for it or it won't happen. Do you want to dig into the DocumentFragment hole without affecting performance? Please do, if that's the case, I'll be watching 👍

Copy link
Author

@iacore iacore Jun 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what should I do instead?

the idea is to swap out <a/> with <c/> without affecting anything else.

<template class="container">
<a/>
<b/>
</template>

the original code is like this:

for (const el of document.querySelector('.container').querySelectorAll('a')) {
el.replaceWith(document.createElement('c'))
}

the behavior is different depending on if .container is a <template> or not.

Copy link
Author

@iacore iacore Jun 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found the solution. The problem is not about live nodes.

template.querySelectorAll works.

template.content.querySelectorAll doesn't. template.content clones each node and puts them in an array. Calling .replaceWith on new nodes doesn't work. Using template.childNodes could work as well.

Anyway, thanks for the trippy trip down the DOM road!

Copy link
Owner

@WebReflection WebReflection Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, templte.content does that and it's not a LIVE NodeList so you got your answer ... that won't land in here, it's no purpose whatsoever, so if you solved, remove the failing-but-not-really test and let's merge your changes?

assert(template2.innerHTML, '<br>', 'expected content');