linkedom icon indicating copy to clipboard operation
linkedom copied to clipboard

HTMLTemplateElement innerHTML output bugfix (cjs, esm)

Open visualkhh opened this issue 4 months ago • 3 comments

--browser result--

const f = document.createDocumentFragment();
const d = document.createElement('div')
d.innerHTML='<a>aaa</a>';
f.append(d);
const t = document.createElement('template');
t.content.append(f);
console.log(t.innerHTML); // '<div><a>aaa</a></div>'
console.log(t.innerText); //''
image

--linkedom--

console.log(t.innerHTML); //''
console.log(t.innerText); //''

After appending the child element to the HTML Template Element's content If you do innerHTML, it is normal to output the contents of the child element, but it is not output in linkedom.

bugfix

visualkhh avatar Oct 06 '25 16:10 visualkhh

@WebReflection here

visualkhh avatar Oct 06 '25 16:10 visualkhh

test around this needs amend/fixes

WebReflection avatar Oct 07 '25 07:10 WebReflection

@WebReflection Test code has been added.

Fix template element parsing and innerHTML handling

  • Fix template children being parsed into element.childNodes instead of template.content during parseHTML()
  • Add special handling in parse-from-string.js to redirect template children to content DocumentFragment
  • Implement proper template.innerHTML getter/setter to access content instead of direct children
  • Add template.toString() method following TextElement pattern to include content in serialization
  • Ensure template element follows HTML spec where innerHTML always references template.content
  • Add null safety checks in parsing logic to prevent errors during template processing

The template element now correctly:

  • Parses children into content during HTML parsing
  • Returns content innerHTML when accessing template.innerHTML
  • Maintains separation between direct children and content
  • Serializes with content included in toString()

visualkhh avatar Oct 07 '25 14:10 visualkhh