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

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

Author: visualkhh

cjs/html/template-element.js

@@ -5,7 +5,10 @@ const {registerHTMLClass} = require('../shared/register-html-class.js');
 
 const {HTMLElement} = require('./element.js');
 
-import {getInnerHtml} from '../mixin/inner-html.js'
+const {getInnerHtml} = require('../mixin/inner-html.js');
+const {setInnerHtml} = require("../mixin/inner-html");
+
+const {toString} = require('./element.js').HTMLElement.prototype;
 
 const tagName = 'template';
 
@@ -14,22 +17,27 @@ const tagName = 'template';
  */
 class HTMLTemplateElement extends HTMLElement {
   constructor(ownerDocument) {
-    super(ownerDocument, tagName);
-    const content = this.ownerDocument.createDocumentFragment();
-    (this[CONTENT] = content)[PRIVATE] = this;
+      super(ownerDocument, tagName);
+      const content = this.ownerDocument.createDocumentFragment();
+      (this[CONTENT] = content)[PRIVATE] = this;
   }
 
   get innerHTML() {
     return getInnerHtml(this.content);
   }
 
+    set innerHTML(html) {
+      setInnerHtml(this[CONTENT], html);
+  }
+
   get content() {
-    if (this.hasChildNodes() && !this[CONTENT].hasChildNodes()) {
-      for (const node of this.childNodes)
-        this[CONTENT].appendChild(node.cloneNode(true));
-    }
     return this[CONTENT];
   }
+
+  toString() {
+    const outerHTML = toString.call(this.cloneNode());
+    return outerHTML.replace('></template>', () => `>${this.innerHTML}</template>`);
+  }
 }
 
 registerHTMLClass(tagName, HTMLTemplateElement);

cjs/shared/parse-from-string.js

@@ -2,7 +2,7 @@
 const HTMLParser2 = require('htmlparser2');
 
 const {ELEMENT_NODE, SVG_NAMESPACE} = require('./constants.js');
-const {CUSTOM_ELEMENTS, PREV, END, VALUE} = require('./symbols.js');
+const {CUSTOM_ELEMENTS, PREV, END, VALUE, CONTENT, PRIVATE} = require('./symbols.js');
 const {keys} = require('./object.js');
 
 const {knownBoundaries, knownSiblings} = require('./utils.js');
@@ -19,6 +19,10 @@ const {Parser} = HTMLParser2;
 let notParsing = true;
 
 const append = (self, node, active) => {
+  if (self && self.localName === 'template' && self[CONTENT]) {
+    self = self[CONTENT];
+  }
+  if (!self) return node; // null 체크 추가
   const end = self[END];
   node.parentNode = self;
   knownBoundaries(end[PREV], node, end);
@@ -107,6 +111,9 @@ const parseFromString = (document, isHTML, markupLanguage) => {
     onclosetag() {
       if (isHTML && node === ownerSVGElement)
         ownerSVGElement = null;
+      if (node && node[PRIVATE]) {
+        node = node[PRIVATE];
+      }
       node = node.parentNode;
     }
   }, {

esm/html/template-element.js

@@ -4,7 +4,9 @@ import {registerHTMLClass} from '../shared/register-html-class.js';
 
 import {HTMLElement} from './element.js';
 
-import {getInnerHtml} from '../mixin/inner-html.js'
+import {getInnerHtml, setInnerHtml} from '../mixin/inner-html.js';
+
+const {toString} = HTMLElement.prototype;
 
 const tagName = 'template';
 
@@ -22,13 +24,18 @@ class HTMLTemplateElement extends HTMLElement {
     return getInnerHtml(this.content);
   }
 
+  set innerHTML(html) {
+    setInnerHtml(this[CONTENT], html);
+  }
+
   get content() {
-    if (this.hasChildNodes() && !this[CONTENT].hasChildNodes()) {
-      for (const node of this.childNodes)
-        this[CONTENT].appendChild(node.cloneNode(true));
-    }
     return this[CONTENT];
   }
+
+  toString() {
+    const outerHTML = toString.call(this.cloneNode());
+    return outerHTML.replace('></template>', () => `>${this.innerHTML}</template>`);
+  }
 }
 
 registerHTMLClass(tagName, HTMLTemplateElement);

esm/shared/parse-from-string.js

@@ -1,7 +1,7 @@
 import * as HTMLParser2 from 'htmlparser2';
 
 import {ELEMENT_NODE, SVG_NAMESPACE} from './constants.js';
-import {CUSTOM_ELEMENTS, PREV, END, VALUE} from './symbols.js';
+import {CUSTOM_ELEMENTS, PREV, END, VALUE, CONTENT, PRIVATE} from './symbols.js';
 import {keys} from './object.js';
 
 import {knownBoundaries, knownSiblings} from './utils.js';
@@ -18,6 +18,10 @@ const {Parser} = HTMLParser2;
 let notParsing = true;
 
 const append = (self, node, active) => {
+  if (self && self.localName === 'template' && self[CONTENT]) {
+    self = self[CONTENT];
+  }
+  if (!self) return node; // null 체크 추가
   const end = self[END];
   node.parentNode = self;
   knownBoundaries(end[PREV], node, end);
@@ -105,6 +109,9 @@ export const parseFromString = (document, isHTML, markupLanguage) => {
     onclosetag() {
       if (isHTML && node === ownerSVGElement)
         ownerSVGElement = null;
+      if (node && node[PRIVATE]) {
+        node = node[PRIVATE];
+      }
       node = node.parentNode;
     }
   }, {

test/html/template-element.js

@@ -15,7 +15,7 @@ assert(document.querySelector('template > *'), null);
 assert(template.content, template.content);
 
 template.replaceChildren();
-assert(template.innerHTML, '');
+assert(template.innerHTML, '<div>foo</div><div>bar</div>');
 
 template.innerHTML = '<p>ok</p>';
 assert(template.innerHTML, '<p>ok</p>');
@@ -47,3 +47,23 @@ const docWithTemplateAttribute = parseHTML(`<div template="anything"><p>not insi
 
 assert(docWithTemplateAttribute.querySelector('*').tagName, 'P');
 assert(docWithTemplateAttribute.querySelectorAll('*').length, 1);
+
+template = document.createElement('template');
+let fragment = document.createDocumentFragment();
+let div = document.createElement('div')
+div.innerHTML='<a>child element</a>';
+fragment.append(div);
+template.content.append(fragment);
+assert(template.innerHTML, '<div><a>child element</a></div>', 'template.innerHTML');
+assert(template.innerText, '', 'template.innerText');
+
+template = document.createElement('template');
+template.innerHTML='<div><a>child element  innerHTML</a></div>';
+fragment = document.createDocumentFragment();
+div = document.createElement('div');
+div.innerHTML='<a>new child element</a>';
+assert(Array.from(template.children).length, 0, 'template.appendChild zero');
+template.appendChild(div);
+assert(Array.from(template.children).length, 1, 'template.appendChild one');
+assert(template.innerText, 'new child element', 'template.innerText');
+assert(template.innerHTML, '<div><a>child element  innerHTML</a></div>', 'template.innerHTML The template maintains internal HTML even with additional children');