Skip to content

Conversation

visualkhh
Copy link

--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

--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); //''

--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
Copy link
Author

@WebReflection here

@WebReflection
Copy link
Owner

test around this needs amend/fixes

@visualkhh
Copy link
Author

@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()

- 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()

--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); //''

--linkedom--
console.log(t.innerHTML); // ''
console.log(t.innerText); //''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants