From 97d2ac4f791ad2d74345d4df2468d5b2c6c7f245 Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Sun, 21 Dec 2025 20:10:38 +0000
Subject: [PATCH 01/11] shadowRoot) allow bind at template

---
 .../spec/bindingAttributeBehaviors.js         |  2 +-
 .../bind/spec/bindingAttributeBehaviors.ts    |  2 +-
 packages/bind/src/applyBindings.ts            | 25 +++++++++++------
 .../spec/nativeTemplateEngineBehaviors.ts     | 27 +++++++++++++++++++
 packages/utils/src/dom/disposal.ts            |  5 ++--
 packages/utils/src/dom/info.ts                |  6 ++++-
 packages/utils/src/dom/virtualElements.ts     |  8 ++++++
 7 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/builds/knockout/spec/bindingAttributeBehaviors.js b/builds/knockout/spec/bindingAttributeBehaviors.js
index bc40e142..9cacaa6d 100644
--- a/builds/knockout/spec/bindingAttributeBehaviors.js
+++ b/builds/knockout/spec/bindingAttributeBehaviors.js
@@ -594,7 +594,7 @@ describe('Binding attribute syntax', function() {
             expect(testNode).toContainHtml('<p>replaced</p><textarea>test</textarea><p>replaced</p>');
         });
 
-        it('<template>', function() {
+        xit('<template>', function() {
             document.createElement('template'); // For old IE
             testNode.innerHTML = "<p>Hello</p><template>test</template><p>Goodbye</p>";
             ko.applyBindings({ sometext: 'hello' }, testNode);
diff --git a/packages/bind/spec/bindingAttributeBehaviors.ts b/packages/bind/spec/bindingAttributeBehaviors.ts
index 6b543b72..2c1963ea 100644
--- a/packages/bind/spec/bindingAttributeBehaviors.ts
+++ b/packages/bind/spec/bindingAttributeBehaviors.ts
@@ -875,7 +875,7 @@ describe('Binding attribute syntax', function () {
       expect(testNode).toContainHtml('<p>replaced</p><textarea>test</textarea><p>replaced</p>')
     })
 
-    it('<template>', function () {
+    xit('<template>', function () {
       document.createElement('template') // For old IE
       testNode.innerHTML = '<p>Hello</p><template>test</template><p>Goodbye</p>'
       applyBindings({ sometext: 'hello' }, testNode)
diff --git a/packages/bind/src/applyBindings.ts b/packages/bind/src/applyBindings.ts
index 728f9dc1..11166ad8 100644
--- a/packages/bind/src/applyBindings.ts
+++ b/packages/bind/src/applyBindings.ts
@@ -49,12 +49,8 @@ type BindingHandlerOrUndefined = (typeof BindingHandler & BindingHandler) | unde
 const bindingDoesNotRecurseIntoElementTypes = {
   // Don't want bindings that operate on text nodes to mutate <script> and <textarea> contents,
   // because it's unexpected and a potential XSS issue.
-  // Also bindings should not operate on <template> elements since this breaks in Internet Explorer
-  // and because such elements' contents are always intended to be bound in a different context
-  // from where they appear in the document.
   script: true,
-  textarea: true,
-  template: true
+  textarea: true
 }
 
 function getBindingProvider(): Provider {
@@ -62,7 +58,12 @@ function getBindingProvider(): Provider {
 }
 
 function isProviderForNode(provider: Provider, node: Node): boolean {
-  const nodeTypes = provider.FOR_NODE_TYPES || [Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE]
+  const nodeTypes = provider.FOR_NODE_TYPES || [
+    Node.ELEMENT_NODE,
+    Node.TEXT_NODE,
+    Node.COMMENT_NODE,
+    Node.DOCUMENT_FRAGMENT_NODE
+  ]
   return nodeTypes.includes(node.nodeType)
 }
 
@@ -473,7 +474,11 @@ export function applyBindingsToDescendants<T = any>(
 ): BindingResult {
   const asyncBindingsApplied = new Set()
   const bindingContext = getBindingContext(viewModelOrBindingContext)
-  if (rootNode.nodeType === Node.ELEMENT_NODE || rootNode.nodeType === Node.COMMENT_NODE) {
+  if (
+    rootNode.nodeType === Node.ELEMENT_NODE
+    || rootNode.nodeType === Node.COMMENT_NODE
+    || rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+  ) {
     applyBindingsToDescendantsInternal(bindingContext, rootNode, asyncBindingsApplied)
     return new BindingResult({ asyncBindingsApplied, rootNode, bindingContext })
   }
@@ -493,7 +498,11 @@ export function applyBindings<T = any>(
     if (!rootNode) {
       throw Error('ko.applyBindings: could not find window.document.body; has the document been loaded?')
     }
-  } else if (rootNode.nodeType !== Node.ELEMENT_NODE && rootNode.nodeType !== Node.COMMENT_NODE) {
+  } else if (
+    rootNode.nodeType !== Node.ELEMENT_NODE
+    && rootNode.nodeType !== Node.COMMENT_NODE
+    && rootNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+  ) {
     throw Error('ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node')
   }
   const rootContext = getBindingContext<T>(viewModelOrBindingContext, extendContextCallback)
diff --git a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
index 49894ea1..7787e186 100644
--- a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
+++ b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
@@ -209,6 +209,33 @@ describe('Native template engine', function () {
     })
   })
 
+  describe('Template data context', function () {
+    it('should set $data to the template data value', function () {
+      const fragment = document.createDocumentFragment()
+      const template = document.createElement('template') as HTMLTemplateElement
+      fragment.appendChild(template)
+
+      template.innerHTML =
+        "<div data-bind='template: { data: someItem }'>" + "Value: <span data-bind='text: $data.val'></span>" + '</div>'
+      applyBindings({ someItem: { val: 'abc' } }, template)
+      console.log(template.content.childNodes[0])
+      expect(template.content.childNodes[0]).toContainText('Value: abc')
+    })
+
+    it('should set $data to the DIV at DocumentFragment', function () {
+      const fragment = document.createDocumentFragment()
+      const div = document.createElement('div') as HTMLDivElement
+
+      div.innerHTML =
+        "<div data-bind='template: { data: someItem }'>" + "Value: <span data-bind='text: $data.val'></span>" + '</div>'
+
+      fragment.appendChild(div)
+      applyBindings({ someItem: { val: 'abc' } }, div)
+      console.log(div.childNodes[0])
+      expect(div.childNodes[0]).toContainText('Value: abc')
+    })
+  })
+
   describe('Data-bind syntax', function () {
     it('should expose parent binding context as $parent if binding with an explicit \"data\" value', function () {
       testNode.innerHTML =
diff --git a/packages/utils/src/dom/disposal.ts b/packages/utils/src/dom/disposal.ts
index 5aecdce9..99306fd0 100644
--- a/packages/utils/src/dom/disposal.ts
+++ b/packages/utils/src/dom/disposal.ts
@@ -11,8 +11,9 @@ let domDataKey = domData.nextKey()
 // 1: Element
 // 8: Comment
 // 9: Document
-let cleanableNodeTypes = { 1: true, 8: true, 9: true }
-let cleanableNodeTypesWithDescendants = { 1: true, 9: true }
+// 11: DocumentFragment
+let cleanableNodeTypes = { 1: true, 8: true, 9: true, 11: true }
+let cleanableNodeTypesWithDescendants = { 1: true, 9: true, 11: true }
 
 function getDisposeCallbacksCollection(node: Node, createIfNotFound: boolean) {
   let allDisposeCallbacks = domData.get(node, domDataKey)
diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index 3fed3fb1..c361607d 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -9,7 +9,11 @@ export function domNodeIsContainedBy(node: Node, containedByNode: Node) {
   }
   if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
     return false
-  } // Fixes issue #1162 - can't use node.contains for document fragments on IE8
+  }
+  if (!containedByNode) {
+    return false
+  }
+  // Fixes issue #1162 - can't use node.contains for document fragments on IE8
   if (containedByNode.contains) {
     return containedByNode.contains(node.nodeType !== Node.ELEMENT_NODE ? node.parentNode : node)
   }
diff --git a/packages/utils/src/dom/virtualElements.ts b/packages/utils/src/dom/virtualElements.ts
index b6f3432e..3d491887 100644
--- a/packages/utils/src/dom/virtualElements.ts
+++ b/packages/utils/src/dom/virtualElements.ts
@@ -28,6 +28,10 @@ export const startCommentRegex = commentNodesHaveTextProperty
 export const endCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\s*\/ko\s*$/
 let htmlTagsWithOptionallyClosingChildren = { ul: true, ol: true }
 
+export function isTemplate(node) {
+  return node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'template'
+}
+
 export function isStartComment(node) {
   return (
     node.nodeType === Node.COMMENT_NODE
@@ -186,6 +190,10 @@ export function insertAfter(containerNode: Node, nodeToInsert: Node, insertAfter
 }
 
 export function firstChild(node: Node) {
+  if (isTemplate(node)) {
+    return (node as HTMLTemplateElement).content.firstChild
+  }
+
   if (!isStartComment(node)) {
     if (node.firstChild && isEndComment(node.firstChild)) {
       throw new Error('Found invalid end comment, as the first child of ' + (node as Element).outerHTML)

From 652d3f0b84b24dad55fb2e61c4d6efb5628a2032 Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 06:11:59 +0000
Subject: [PATCH 02/11] shadowDom) some cleanups + new test-cases

---
 .../spec/bindingAttributeBehaviors.js         |  2 +-
 .../bind/spec/bindingAttributeBehaviors.ts    |  5 ++-
 .../spec/componentBindingBehaviors.ts         | 33 +++++++++++++++++++
 .../binding.template/spec/foreachBehaviors.ts | 10 ++++++
 packages/utils/src/dom/info.ts                |  8 +++--
 packages/utils/src/dom/virtualElements.ts     | 10 ++----
 6 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/builds/knockout/spec/bindingAttributeBehaviors.js b/builds/knockout/spec/bindingAttributeBehaviors.js
index 9cacaa6d..c81d2f6c 100644
--- a/builds/knockout/spec/bindingAttributeBehaviors.js
+++ b/builds/knockout/spec/bindingAttributeBehaviors.js
@@ -594,7 +594,7 @@ describe('Binding attribute syntax', function() {
             expect(testNode).toContainHtml('<p>replaced</p><textarea>test</textarea><p>replaced</p>');
         });
 
-        xit('<template>', function() {
+        xit('<template>', function() { //Disabled because TKO allows binding in <template> elements
             document.createElement('template'); // For old IE
             testNode.innerHTML = "<p>Hello</p><template>test</template><p>Goodbye</p>";
             ko.applyBindings({ sometext: 'hello' }, testNode);
diff --git a/packages/bind/spec/bindingAttributeBehaviors.ts b/packages/bind/spec/bindingAttributeBehaviors.ts
index f06ff30e..f507eef2 100644
--- a/packages/bind/spec/bindingAttributeBehaviors.ts
+++ b/packages/bind/spec/bindingAttributeBehaviors.ts
@@ -875,11 +875,10 @@ describe('Binding attribute syntax', function () {
       expect(testNode).toContainHtml('<p>replaced</p><textarea>test</textarea><p>replaced</p>')
     })
 
-    xit('<template>', function () {
-      document.createElement('template') // For old IE
+    it('<template>', function () {
       testNode.innerHTML = '<p>Hello</p><template>test</template><p>Goodbye</p>'
       applyBindings({ sometext: 'hello' }, testNode)
-      expect(testNode).toContainHtml('<p>replaced</p><template>test</template><p>replaced</p>')
+      expect(testNode).toContainHtml('<p>replaced</p><template>replaced</template><p>replaced</p>')
     })
   })
 
diff --git a/packages/binding.component/spec/componentBindingBehaviors.ts b/packages/binding.component/spec/componentBindingBehaviors.ts
index 403403aa..722827e7 100644
--- a/packages/binding.component/spec/componentBindingBehaviors.ts
+++ b/packages/binding.component/spec/componentBindingBehaviors.ts
@@ -1203,6 +1203,39 @@ describe('Components: Component binding', function () {
       expect(innerText).toEqual(`X beep Y Gamma Zeta Q`)
     })
 
+    it('processes default and named slots in template', function () {
+      const fragment = document.createDocumentFragment()
+      const template = document.createElement('template') as HTMLTemplateElement
+      fragment.appendChild(template)
+
+      template.innerHTML = `
+        <test-component>
+          <template slot='alpha'>beep</template>
+          Gamma
+          <div>Zeta</div>
+        </test-component>
+      `
+      class ViewModel extends components.ComponentABC {
+        static override get template() {
+          return `
+            <div>
+              X <slot name='alpha'></slot> Y <slot></slot> Q
+            </div>
+          `
+        }
+      }
+      ViewModel.register('test-component')
+
+      const usedCopie = template.cloneNode(true) as HTMLTemplateElement
+      applyBindings(outerViewModel, usedCopie)
+
+      const innerText = (usedCopie.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
+      expect(innerText).toEqual(`X beep Y Gamma Zeta Q`)
+
+      const innerTextOrg = (template.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
+      expect(innerTextOrg).toEqual('Gamma Zeta')
+    })
+
     it('inserts all component template nodes in an unnamed (default) slot', function () {
       testNode.innerHTML = `
         <test-component>
diff --git a/packages/binding.template/spec/foreachBehaviors.ts b/packages/binding.template/spec/foreachBehaviors.ts
index 911c53cd..d11c9f32 100644
--- a/packages/binding.template/spec/foreachBehaviors.ts
+++ b/packages/binding.template/spec/foreachBehaviors.ts
@@ -95,6 +95,16 @@ describe('Binding: Foreach', function () {
     )
   })
 
+  it('Should be able to use $data to reference each array item being bound in HTMLTemplate with HTMLSlotElement', function () {
+    testNode.innerHTML =
+      "<template><div data-bind='foreach: someItems'><slot data-bind='text: $data'></slot></div></template>"
+    const someItems = ['alpha', 'beta']
+    applyBindings({ someItems: someItems }, testNode)
+    expect((testNode.childNodes[0] as HTMLTemplateElement).content.firstChild).toContainHtml(
+      '<slot data-bind="text: $data">alpha</slot><slot data-bind="text: $data">beta</slot>'
+    )
+  })
+
   it('Should add and remove nodes to match changes in the bound array', function () {
     testNode.innerHTML = "<div data-bind='foreach: someItems'><span data-bind='text: childProp'></span></div>"
     const someItems = observableArray([{ childProp: 'first child' }, { childProp: 'second child' }])
diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index c361607d..6d000ee5 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -43,7 +43,11 @@ export function tagNameLower(element: Element) {
   return element && element.tagName && element.tagName.toLowerCase()
 }
 
-export function isDomElement(obj) {
+export function isTemplateTag(node): node is HTMLTemplateElement {
+  return node && node.nodeType === Node.ELEMENT_NODE && tagNameLower(node) === 'template'
+}
+
+export function isDomElement(obj): obj is HTMLElement {
   if (window.HTMLElement) {
     return obj instanceof HTMLElement
   } else {
@@ -51,7 +55,7 @@ export function isDomElement(obj) {
   }
 }
 
-export function isDocumentFragment(obj) {
+export function isDocumentFragment(obj): obj is DocumentFragment {
   if (window.DocumentFragment) {
     return obj instanceof DocumentFragment
   } else {
diff --git a/packages/utils/src/dom/virtualElements.ts b/packages/utils/src/dom/virtualElements.ts
index f177cacd..6f9f44fc 100644
--- a/packages/utils/src/dom/virtualElements.ts
+++ b/packages/utils/src/dom/virtualElements.ts
@@ -16,7 +16,7 @@
 // So, use node.text where available, and node.nodeValue elsewhere
 import { emptyDomNode, setDomNodeChildren as setRegularDomNodeChildren } from './manipulation'
 import { removeNode } from './disposal'
-import { tagNameLower } from './info'
+import { tagNameLower, isTemplateTag } from './info'
 import * as domData from './data'
 import options from '../options'
 
@@ -28,10 +28,6 @@ export const startCommentRegex = commentNodesHaveTextProperty
 export const endCommentRegex = commentNodesHaveTextProperty ? /^<!--\s*\/ko\s*-->$/ : /^\s*\/ko\s*$/
 const htmlTagsWithOptionallyClosingChildren = { ul: true, ol: true }
 
-export function isTemplate(node) {
-  return node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'template'
-}
-
 export function isStartComment(node) {
   return (
     node.nodeType === Node.COMMENT_NODE
@@ -190,8 +186,8 @@ export function insertAfter(containerNode: Node, nodeToInsert: Node, insertAfter
 }
 
 export function firstChild(node: Node) {
-  if (isTemplate(node)) {
-    return (node as HTMLTemplateElement).content.firstChild
+  if (isTemplateTag(node)) {
+    return node.content.firstChild
   }
 
   if (!isStartComment(node)) {

From e5a02925c40ca785711c454dc99d4b2c1337bd9c Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 06:28:09 +0000
Subject: [PATCH 03/11] add a comment

---
 packages/utils/src/dom/info.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index 6d000ee5..03463f97 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -10,6 +10,8 @@ export function domNodeIsContainedBy(node: Node, containedByNode: Node) {
   if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
     return false
   }
+  // If there is no contained node, then the node is not attached to it
+  // This case also happens when the shadow DOM from a HTMLTemplateElement is envolved
   if (!containedByNode) {
     return false
   }

From a09f181a97f8be75a2cd71de7b68453b23e677cd Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 08:47:59 +0000
Subject: [PATCH 04/11] shadowRoot) cleanup and test 'domNodeIsContainedBy'

---
 packages/utils/spec/utilsDomBehaviors.ts | 33 ++++++++++++++++++++++++
 packages/utils/src/dom/info.ts           |  2 +-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/utils/spec/utilsDomBehaviors.ts b/packages/utils/spec/utilsDomBehaviors.ts
index 5b1bf13c..b99ba334 100644
--- a/packages/utils/spec/utilsDomBehaviors.ts
+++ b/packages/utils/spec/utilsDomBehaviors.ts
@@ -4,6 +4,7 @@ import * as utils from '../dist'
 import { registerEventHandler, virtualElements } from '../dist'
 import options from '../dist/options'
 import type { KnockoutInstance } from '@tko/builder'
+import { domNodeIsContainedBy } from '../src'
 
 const ko: KnockoutInstance = globalThis.ko || {}
 ko.utils = utils
@@ -16,6 +17,38 @@ describe('startCommentRegex', function () {
   })
 })
 
+describe('DOM-Info Tool', function () {
+  it('Parent Node contains child', function () {
+    const parent = document.createElement('div')
+    const child = document.createElement('span')
+    parent.appendChild(child)
+
+    expect(domNodeIsContainedBy(child, parent)).toBe(true)
+  })
+
+  it('Node not contains node', function () {
+    const parent = document.createElement('div')
+    const child = document.createElement('span')
+
+    expect(domNodeIsContainedBy(child, parent)).toBe(false)
+  })
+
+  it('Parent Node contains subchild', function () {
+    const parent = document.createElement('div')
+    const child = document.createElement('span')
+    const subchild = document.createElement('em')
+    parent.appendChild(child)
+    child.appendChild(subchild)
+
+    const node = document.createTextNode('text')
+
+    expect(domNodeIsContainedBy(subchild, parent)).toBe(true)
+    expect(domNodeIsContainedBy(subchild, child)).toBe(true)
+    expect(domNodeIsContainedBy(subchild, subchild)).toBe(true)
+    expect(domNodeIsContainedBy(node, parent)).toBe(false)
+  })
+})
+
 describe('setTextContent', function () {
   let element: HTMLElement
 
diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index 03463f97..bf75e41b 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -20,7 +20,7 @@ export function domNodeIsContainedBy(node: Node, containedByNode: Node) {
     return containedByNode.contains(node.nodeType !== Node.ELEMENT_NODE ? node.parentNode : node)
   }
   if (containedByNode.compareDocumentPosition) {
-    return (containedByNode.compareDocumentPosition(node) & 16) == 16
+    return containedByNode.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_CONTAINED_BY
   }
 
   let parentNode: Node | null = node

From 85bede9d44a765727b942109b39001ff3b1a8fe2 Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 09:51:32 +0000
Subject: [PATCH 05/11] shadowRoot) coderabbitai fixes

---
 package.json                                  |  4 ++-
 packages/binding.foreach/src/foreach.ts       |  2 +-
 .../spec/nativeTemplateEngineBehaviors.ts     |  2 --
 packages/utils/spec/utilsDomBehaviors.ts      | 28 +++++++++++++++++++
 packages/utils/src/dom/info.ts                | 21 ++++++++------
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 57e070be..b5542e71 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
     "type": "git",
     "url": "https://github.com/knockout/tko.git"
   },
-  "scripts": {},
+  "scripts": {
+    "test": "make sweep && make && make test-headless"
+  },
   "bugs": "https://github.com/knockout/tko/issues",
   "licenses": [
     {
diff --git a/packages/binding.foreach/src/foreach.ts b/packages/binding.foreach/src/foreach.ts
index 906c3cdc..f4b0fcbc 100644
--- a/packages/binding.foreach/src/foreach.ts
+++ b/packages/binding.foreach/src/foreach.ts
@@ -387,7 +387,7 @@ export class ForEachBinding extends AsyncBindingHandler {
    */
   activeChildElement(node) {
     const active = document.activeElement
-    if (domNodeIsContainedBy(active!, node)) {
+    if (domNodeIsContainedBy(active, node)) {
       return active
     }
     return null
diff --git a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
index 9634f28b..d2eee2bc 100644
--- a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
+++ b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
@@ -226,7 +226,6 @@ describe('Native template engine', function () {
       template.innerHTML =
         "<div data-bind='template: { data: someItem }'>" + "Value: <span data-bind='text: $data.val'></span>" + '</div>'
       applyBindings({ someItem: { val: 'abc' } }, template)
-      console.log(template.content.childNodes[0])
       expect(template.content.childNodes[0]).toContainText('Value: abc')
     })
 
@@ -239,7 +238,6 @@ describe('Native template engine', function () {
 
       fragment.appendChild(div)
       applyBindings({ someItem: { val: 'abc' } }, div)
-      console.log(div.childNodes[0])
       expect(div.childNodes[0]).toContainText('Value: abc')
     })
   })
diff --git a/packages/utils/spec/utilsDomBehaviors.ts b/packages/utils/spec/utilsDomBehaviors.ts
index b99ba334..68d6f92f 100644
--- a/packages/utils/spec/utilsDomBehaviors.ts
+++ b/packages/utils/spec/utilsDomBehaviors.ts
@@ -18,6 +18,34 @@ describe('startCommentRegex', function () {
 })
 
 describe('DOM-Info Tool', function () {
+  it('domNodeIsContainedBy with special values', function () {
+    const parent = document.createElement('div')
+    var test = document.createDocumentFragment()
+
+    expect(domNodeIsContainedBy(parent, test)).toBe(false)
+    expect(domNodeIsContainedBy(test, parent)).toBe(false)
+
+    expect(domNodeIsContainedBy(parent, undefined)).toBe(false)
+    expect(domNodeIsContainedBy(parent, null)).toBe(false)
+    expect(domNodeIsContainedBy(null, parent)).toBe(false)
+
+    test.appendChild(parent)
+
+    expect(domNodeIsContainedBy(parent, test)).toBe(true)
+    expect(domNodeIsContainedBy(test, parent)).toBe(false)
+
+    const testDiv = document.createElement('div')
+    var template = document.createElement('template')
+    template.content.appendChild(testDiv)
+    expect(domNodeIsContainedBy(testDiv, template)).toBe(false) //Because template.content is a DocumentFragment
+    expect(domNodeIsContainedBy(testDiv, template.content)).toBe(true)
+
+    parent.appendChild(template)
+    expect(domNodeIsContainedBy(template, parent)).toBe(true)
+    expect(domNodeIsContainedBy(template, test)).toBe(true)
+    expect(domNodeIsContainedBy(testDiv, parent)).toBe(false) //Because template.content is a DocumentFragment
+  })
+
   it('Parent Node contains child', function () {
     const parent = document.createElement('div')
     const child = document.createElement('span')
diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index bf75e41b..7ed48e7f 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -3,24 +3,27 @@
 //
 import { arrayFirst } from '../array'
 
-export function domNodeIsContainedBy(node: Node, containedByNode: Node) {
+export function domNodeIsContainedBy(node: Node | null, containedByNode?: Node | null): boolean {
+  // If there is no contained node, then the node is not attached to it
+  // This case also happens when the shadow DOM from a HTMLTemplateElement is involved
+  if (!node || !containedByNode) {
+    return false
+  }
   if (node === containedByNode) {
     return true
   }
   if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
     return false
   }
-  // If there is no contained node, then the node is not attached to it
-  // This case also happens when the shadow DOM from a HTMLTemplateElement is envolved
-  if (!containedByNode) {
-    return false
-  }
   // Fixes issue #1162 - can't use node.contains for document fragments on IE8
   if (containedByNode.contains) {
     return containedByNode.contains(node.nodeType !== Node.ELEMENT_NODE ? node.parentNode : node)
   }
   if (containedByNode.compareDocumentPosition) {
-    return containedByNode.compareDocumentPosition(node) === Node.DOCUMENT_POSITION_CONTAINED_BY
+    return (
+      (containedByNode.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_CONTAINED_BY)
+      === Node.DOCUMENT_POSITION_CONTAINED_BY
+    )
   }
 
   let parentNode: Node | null = node
@@ -30,8 +33,8 @@ export function domNodeIsContainedBy(node: Node, containedByNode: Node) {
   return !!parentNode
 }
 
-export function domNodeIsAttachedToDocument(node) {
-  return domNodeIsContainedBy(node, node.ownerDocument.documentElement)
+export function domNodeIsAttachedToDocument(node: Node): boolean {
+  return domNodeIsContainedBy(node, node.ownerDocument?.documentElement)
 }
 
 export function anyDomNodeIsAttachedToDocument(nodes) {

From eef76f08150f2bed4ff62bbdc9cbc7f0ec8b174b Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 09:53:32 +0000
Subject: [PATCH 06/11] fix) remove var

---
 packages/utils/spec/utilsDomBehaviors.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/utils/spec/utilsDomBehaviors.ts b/packages/utils/spec/utilsDomBehaviors.ts
index 68d6f92f..5e9fe159 100644
--- a/packages/utils/spec/utilsDomBehaviors.ts
+++ b/packages/utils/spec/utilsDomBehaviors.ts
@@ -20,7 +20,7 @@ describe('startCommentRegex', function () {
 describe('DOM-Info Tool', function () {
   it('domNodeIsContainedBy with special values', function () {
     const parent = document.createElement('div')
-    var test = document.createDocumentFragment()
+    const test = document.createDocumentFragment()
 
     expect(domNodeIsContainedBy(parent, test)).toBe(false)
     expect(domNodeIsContainedBy(test, parent)).toBe(false)
@@ -35,7 +35,7 @@ describe('DOM-Info Tool', function () {
     expect(domNodeIsContainedBy(test, parent)).toBe(false)
 
     const testDiv = document.createElement('div')
-    var template = document.createElement('template')
+    const template = document.createElement('template')
     template.content.appendChild(testDiv)
     expect(domNodeIsContainedBy(testDiv, template)).toBe(false) //Because template.content is a DocumentFragment
     expect(domNodeIsContainedBy(testDiv, template.content)).toBe(true)

From e2d33482d7431268801922581c5821acbf360494 Mon Sep 17 00:00:00 2001
From: phillipc <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 13:11:45 +0100
Subject: [PATCH 07/11] Update applyBindings.ts

---
 packages/bind/src/applyBindings.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/bind/src/applyBindings.ts b/packages/bind/src/applyBindings.ts
index 079e5497..8fb72ceb 100644
--- a/packages/bind/src/applyBindings.ts
+++ b/packages/bind/src/applyBindings.ts
@@ -61,8 +61,7 @@ function isProviderForNode(provider: Provider, node: Node): boolean {
   const nodeTypes = provider.FOR_NODE_TYPES || [
     Node.ELEMENT_NODE,
     Node.TEXT_NODE,
-    Node.COMMENT_NODE,
-    Node.DOCUMENT_FRAGMENT_NODE
+    Node.COMMENT_NODE
   ]
   return nodeTypes.includes(node.nodeType)
 }

From 2ad076eb2a9f512ae4617e2c54c617abdcd40df7 Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 14:25:28 +0000
Subject: [PATCH 08/11] fix) type and format

---
 packages/bind/src/applyBindings.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/bind/src/applyBindings.ts b/packages/bind/src/applyBindings.ts
index 8fb72ceb..1de4e59b 100644
--- a/packages/bind/src/applyBindings.ts
+++ b/packages/bind/src/applyBindings.ts
@@ -58,11 +58,7 @@ function getBindingProvider(): Provider {
 }
 
 function isProviderForNode(provider: Provider, node: Node): boolean {
-  const nodeTypes = provider.FOR_NODE_TYPES || [
-    Node.ELEMENT_NODE,
-    Node.TEXT_NODE,
-    Node.COMMENT_NODE
-  ]
+  const nodeTypes = provider.FOR_NODE_TYPES || [Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE]
   return nodeTypes.includes(node.nodeType)
 }
 
@@ -398,7 +394,7 @@ function applyBindingsToNodeInternal<T>(
 
 /**
  *
- * @param {HTMLElement} node
+ * @param {Node} node
  * @param {Object} bindings
  * @param {[Promise]} nodeAsyncBindingPromises
  */
@@ -438,7 +434,7 @@ function getBindingContext<T = any>(
 }
 
 export function applyBindingAccessorsToNode<T = any>(
-  node: HTMLElement,
+  node: Node,
   bindings: Record<string, any>,
   viewModelOrBindingContext?: BindingContext<T> | Observable<T> | T,
   asyncBindingsApplied?: Set<any>
@@ -456,7 +452,7 @@ export function applyBindingAccessorsToNode<T = any>(
 }
 
 export function applyBindingsToNode<T = any>(
-  node: HTMLElement,
+  node: Node,
   bindings: Record<string, any>,
   viewModelOrBindingContext: BindingContext<T> | Observable<T> | T
 ): BindingResult {
@@ -486,7 +482,7 @@ export function applyBindingsToDescendants<T = any>(
 
 export function applyBindings<T = any>(
   viewModelOrBindingContext: BindingContext<T> | Observable<T> | T,
-  rootNode: HTMLElement,
+  rootNode: Node,
   extendContextCallback?: BindingContextExtendCallback<T>
 ): Promise<unknown> {
   const asyncBindingsApplied = new Set()

From 4ef2146817689a871cd08110984bed78263caf24 Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 14:55:59 +0000
Subject: [PATCH 09/11] disposing) Document and DocumentFragment was not taken
 into account

---
 .../utils/spec/domNodeDisposalBehaviors.ts    | 19 +++++++++++++++++++
 packages/utils/src/dom/disposal.ts            | 10 +++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/utils/spec/domNodeDisposalBehaviors.ts b/packages/utils/spec/domNodeDisposalBehaviors.ts
index 5f5e6c39..2d4467a7 100644
--- a/packages/utils/spec/domNodeDisposalBehaviors.ts
+++ b/packages/utils/spec/domNodeDisposalBehaviors.ts
@@ -62,6 +62,25 @@ describe('DOM node disposal', function () {
     expect(testNode.childNodes.length).toEqual(0)
   })
 
+  it('Should run registered disposal callbacks and detach from DOM when a document fragment is cleanup', function () {
+    let didRunCount = 0
+
+    const fragment = document.createDocumentFragment()
+    const childNode = document.createElement('DIV')
+    fragment.appendChild(childNode)
+
+    addDisposeCallback(childNode, function () {
+      didRunCount++
+    })
+    addDisposeCallback(fragment, function () {
+      didRunCount++
+    })
+
+    expect(didRunCount).toEqual(0)
+    cleanNode(fragment)
+    expect(didRunCount).toEqual(2)
+  })
+
   it('Should be able to remove previously-registered disposal callbacks', function () {
     let didRun = false
     const callback = function () {
diff --git a/packages/utils/src/dom/disposal.ts b/packages/utils/src/dom/disposal.ts
index 8776511e..6c859563 100644
--- a/packages/utils/src/dom/disposal.ts
+++ b/packages/utils/src/dom/disposal.ts
@@ -87,14 +87,18 @@ export function removeDisposeCallback(node: Node, callback: (node: Node) => void
   }
 }
 
-export function cleanNode(node: Node): typeof node {
+export function cleanNode(node: Node): Node {
   // First clean this node, where applicable
   if (cleanableNodeTypes[node.nodeType]) {
     cleanSingleNode(node)
 
     // ... then its descendants, where applicable
-    if (cleanableNodeTypesWithDescendants[node.nodeType] && node instanceof Element) {
-      cleanNodesInList(node.getElementsByTagName('*'))
+    if (cleanableNodeTypesWithDescendants[node.nodeType]) {
+      if (node instanceof Element) {
+        cleanNodesInList(node.getElementsByTagName('*'))
+      } else if (node instanceof Document || node instanceof DocumentFragment) {
+        cleanNodesInList(node.childNodes)
+      }
     }
   }
   return node

From 1d159079d9d251f057d1415da7587062c230fefa Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 15:27:02 +0000
Subject: [PATCH 10/11] disposing) use querySelectorAll

---
 .../spec/componentBindingBehaviors.ts            |  6 +++---
 packages/utils/spec/domNodeDisposalBehaviors.ts  | 16 +++++++++-------
 packages/utils/src/dom/disposal.ts               |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/binding.component/spec/componentBindingBehaviors.ts b/packages/binding.component/spec/componentBindingBehaviors.ts
index 722827e7..857b16c6 100644
--- a/packages/binding.component/spec/componentBindingBehaviors.ts
+++ b/packages/binding.component/spec/componentBindingBehaviors.ts
@@ -1226,10 +1226,10 @@ describe('Components: Component binding', function () {
       }
       ViewModel.register('test-component')
 
-      const usedCopie = template.cloneNode(true) as HTMLTemplateElement
-      applyBindings(outerViewModel, usedCopie)
+      const copy = template.cloneNode(true) as HTMLTemplateElement
+      applyBindings(outerViewModel, copy)
 
-      const innerText = (usedCopie.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
+      const innerText = (copy.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
       expect(innerText).toEqual(`X beep Y Gamma Zeta Q`)
 
       const innerTextOrg = (template.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
diff --git a/packages/utils/spec/domNodeDisposalBehaviors.ts b/packages/utils/spec/domNodeDisposalBehaviors.ts
index 2d4467a7..da66ed2d 100644
--- a/packages/utils/spec/domNodeDisposalBehaviors.ts
+++ b/packages/utils/spec/domNodeDisposalBehaviors.ts
@@ -62,23 +62,25 @@ describe('DOM node disposal', function () {
     expect(testNode.childNodes.length).toEqual(0)
   })
 
-  it('Should run registered disposal callbacks and detach from DOM when a document fragment is cleanup', function () {
+  it('Should run registered disposal callbacks when a document fragment is cleaned', function () {
     let didRunCount = 0
 
     const fragment = document.createDocumentFragment()
     const childNode = document.createElement('DIV')
+    const spanNode = document.createElement('SPAN')
+    childNode.appendChild(spanNode)
     fragment.appendChild(childNode)
 
-    addDisposeCallback(childNode, function () {
-      didRunCount++
-    })
-    addDisposeCallback(fragment, function () {
-      didRunCount++
+    const array = [fragment, childNode, spanNode]
+    array.forEach(node => {
+      addDisposeCallback(node, function () {
+        didRunCount++
+      })
     })
 
     expect(didRunCount).toEqual(0)
     cleanNode(fragment)
-    expect(didRunCount).toEqual(2)
+    expect(didRunCount).toEqual(array.length)
   })
 
   it('Should be able to remove previously-registered disposal callbacks', function () {
diff --git a/packages/utils/src/dom/disposal.ts b/packages/utils/src/dom/disposal.ts
index 6c859563..9bc0bf27 100644
--- a/packages/utils/src/dom/disposal.ts
+++ b/packages/utils/src/dom/disposal.ts
@@ -97,7 +97,7 @@ export function cleanNode(node: Node): Node {
       if (node instanceof Element) {
         cleanNodesInList(node.getElementsByTagName('*'))
       } else if (node instanceof Document || node instanceof DocumentFragment) {
-        cleanNodesInList(node.childNodes)
+        cleanNodesInList(node.querySelectorAll('*'))
       }
     }
   }

From c8bfb667266b79fcd22f28d766c156c34e69c43c Mon Sep 17 00:00:00 2001
From: "P.Conrad" <phillipc@gmx.de>
Date: Fri, 26 Dec 2025 15:33:31 +0000
Subject: [PATCH 11/11] test) direct applyBinding to document fragment

---
 .../spec/nativeTemplateEngineBehaviors.ts             | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
index d2eee2bc..13d89368 100644
--- a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
+++ b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
@@ -229,6 +229,17 @@ describe('Native template engine', function () {
       expect(template.content.childNodes[0]).toContainText('Value: abc')
     })
 
+    it('applyBindings to fragment should set $data to the template data value', function () {
+      const fragment = document.createDocumentFragment()
+      const template = document.createElement('template') as HTMLTemplateElement
+      fragment.appendChild(template)
+
+      template.innerHTML =
+        "<div data-bind='template: { data: someItem }'>" + "Value: <span data-bind='text: $data.val'></span>" + '</div>'
+      applyBindings({ someItem: { val: 'abc' } }, fragment)
+      expect(template.content.childNodes[0]).toContainText('Value: abc')
+    })
+
     it('should set $data to the DIV at DocumentFragment', function () {
       const fragment = document.createDocumentFragment()
       const div = document.createElement('div') as HTMLDivElement