innerHTML broken for template elements
See original GitHub issueTest case:
const t = document.createElement('template');
t.innerHTML = '<div>happy-dom is cool!</div>';
console.log(JSON.stringify(t.innerHTML));
Output in
- Chrome:
"<div>happy-dom is cool!</div>"
- jsdom:
"<div>happy-dom is cool!</div>"
- linkedom:
"<div>happy-dom is cool!</div>"
- happy-dom:
""
Expectation
happy-dom should behave like every other tested DOM.
Motivation
This breaks the integration into solid-register, which uses a dom on top of node to test solid code fast.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (4 by maintainers)
Top Results From Across the Web
template tag innerHTML breaks script tags - Stack Overflow
I'm trying to run a string of HTML through the HTML parser which contains <tr> elements. Using the normal HTML parser the <tr>...
Read more >Element.innerHTML - Web APIs | MDN
The Element property innerHTML gets or sets the HTML or XML markup ... If the element whose contents are being replaced is a...
Read more >innerHTML on non <template> elements does correctly upgrade ...
The polyfill only patches innerHTML on elements. This means that setting innerHTML on a non-template element that includes a nested element will fail...
Read more >HTML DOM Element getElementsByClassName() - W3Schools
Definition and Usage. The getElementsByClassName() method returns a collection of child elements with a given class name. The getElementsByClassName() method ...
Read more >div innerHTML with standard lightning web components
You cannot create/use innerHTML for custom components ( c or lightning namespace) in LWC but you can do so for native elements.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
get innerHTML from
this.childNodes
in theElement.ts
https://github.com/capricorn86/happy-dom/blob/faaaa2c90b923a20ccfce1af7e0a514e3d13357b/packages/happy-dom/src/nodes/element/Element.ts#L170-L177
but the div element not in this.childNodes. it’s in
this.content.childNodes
.https://github.com/capricorn86/happy-dom/blob/faaaa2c90b923a20ccfce1af7e0a514e3d13357b/packages/happy-dom/src/nodes/html-template-element/HTMLTemplateElement.ts#L21-L26
so we should overwrite innerHTML like this(maybe error for my understand to sources code):
add code in
HTMLTemplateElement.ts
@capricorn86 Is this a good answer?
We finally have a fix in place that should resolve the remaining issues related to the
HTMLTemplateElement
🙂You can read more about the release here: https://github.com/capricorn86/happy-dom/releases/tag/v6.0.0