diff --git a/.changeset/shadow-root-template-fragment-binding.md b/.changeset/shadow-root-template-fragment-binding.md
new file mode 100644
index 000000000..7a2a07a62
--- /dev/null
+++ b/.changeset/shadow-root-template-fragment-binding.md
@@ -0,0 +1,34 @@
+---
+"@tko/bind": minor
+"@tko/utils": minor
+"@tko/binding.foreach": patch
+---
+
+Allow `applyBindings` to run on `HTMLTemplateElement`, `DocumentFragment`,
+and shadow-root subtrees
+
+`applyBindings` and `applyBindingsToDescendants` now accept any `Node` whose
+`nodeType` is `ELEMENT_NODE`, `COMMENT_NODE`, or `DOCUMENT_FRAGMENT_NODE`,
+which makes it possible to bind a shadow root, a document fragment, or a
+`<template>` element directly. The binding engine recurses into
+`template.content` as if it were a normal subtree.
+
+`@tko/utils`:
+
+- `cleanNode` now disposes nodes in `Document` / `DocumentFragment`
+  subtrees (nodeType 9 and 11), and recurses into every nested
+  `HTMLTemplateElement.content` so bindings created inside templates do
+  not leak. `instanceof` checks are replaced with `nodeType` checks for
+  cross-runtime safety.
+- `virtualElements.firstChild`, `childNodes`, `emptyNode`, and
+  `setDomNodeChildren` now operate on `template.content` for
+  `HTMLTemplateElement`, matching the new template-aware binding path.
+- `domNodeIsContainedBy` accepts `null | undefined` and uses a proper
+  `compareDocumentPosition` bitmask test.
+- New type predicate `isTemplateTag(node)`; `isDomElement` /
+  `isDocumentFragment` now narrow types.
+
+**Behavior change for `@tko/build.knockout`:** legacy KO did not recurse
+into `<template>` elements. TKO now does. Apps that have `data-bind`
+syntax inside `<template>` content and previously relied on it being
+left alone will now have those bindings applied.
diff --git a/builds/knockout/spec/bindingAttributeBehaviors.js b/builds/knockout/spec/bindingAttributeBehaviors.js
index f03a06a30..141d8e2f0 100644
--- a/builds/knockout/spec/bindingAttributeBehaviors.js
+++ b/builds/knockout/spec/bindingAttributeBehaviors.js
@@ -640,10 +640,12 @@ describe('Binding attribute syntax', function () {
     })
 
     it('<template>', function () {
-      document.createElement('template') // For old IE
+      // TKO recurses into <template>.content (unlike legacy KO, which left
+      // <template> contents alone). Verifies the build.knockout bundle
+      // matches the package-level behavior.
       testNode.innerHTML = '<p>Hello</p><template>test</template><p>Goodbye</p>'
       ko.applyBindings({ sometext: 'hello' }, testNode)
-      expectContainHtml(testNode, '<p>replaced</p><template>test</template><p>replaced</p>')
+      expectContainHtml(testNode, '<p>replaced</p><template>replaced</template><p>replaced</p>')
     })
   })
 
diff --git a/packages/bind/spec/bindingAttributeBehaviors.ts b/packages/bind/spec/bindingAttributeBehaviors.ts
index bf11aee53..6338aa207 100644
--- a/packages/bind/spec/bindingAttributeBehaviors.ts
+++ b/packages/bind/spec/bindingAttributeBehaviors.ts
@@ -868,10 +868,9 @@ describe('Binding attribute syntax', function () {
     })
 
     it('<template>', function () {
-      document.createElement('template') // For old IE
       testNode.innerHTML = '<p>Hello</p><template>test</template><p>Goodbye</p>'
       applyBindings({ sometext: 'hello' }, testNode)
-      expectContainHtml(testNode, '<p>replaced</p><template>test</template><p>replaced</p>')
+      expectContainHtml(testNode, '<p>replaced</p><template>replaced</template><p>replaced</p>')
     })
   })
 
diff --git a/packages/bind/src/applyBindings.ts b/packages/bind/src/applyBindings.ts
index f469eb015..fcb34b280 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 {
@@ -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 {
@@ -473,7 +469,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 })
   }
@@ -482,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()
@@ -493,7 +493,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.component/spec/componentBindingBehaviors.ts b/packages/binding.component/spec/componentBindingBehaviors.ts
index a3b83f4e5..7c1c7f339 100644
--- a/packages/binding.component/spec/componentBindingBehaviors.ts
+++ b/packages/binding.component/spec/componentBindingBehaviors.ts
@@ -1394,6 +1394,39 @@ describe('Components: Component binding', function () {
       expect(innerText).to.deep.equal(`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 copy = template.cloneNode(true) as HTMLTemplateElement
+      applyBindings(outerViewModel, copy)
+
+      const innerText = (copy.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
+      expect(innerText).to.deep.equal(`X beep Y Gamma Zeta Q`)
+
+      const innerTextOrg = (template.content.children[0] as HTMLElement).innerText.replace(/\s+/g, ' ').trim()
+      expect(innerTextOrg).to.deep.equal('Gamma Zeta')
+    })
+
     it('inserts all component template nodes in an unnamed (default) slot', function (ctx: any) {
       testNode.innerHTML = `
         <test-component>
diff --git a/packages/binding.foreach/src/foreach.ts b/packages/binding.foreach/src/foreach.ts
index 72ef35ce6..e54fb0c6f 100644
--- a/packages/binding.foreach/src/foreach.ts
+++ b/packages/binding.foreach/src/foreach.ts
@@ -378,7 +378,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/foreachBehaviors.ts b/packages/binding.template/spec/foreachBehaviors.ts
index b43053cc0..8221d70b7 100644
--- a/packages/binding.template/spec/foreachBehaviors.ts
+++ b/packages/binding.template/spec/foreachBehaviors.ts
@@ -106,6 +106,17 @@ 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)
+    expectContainHtml(
+      (testNode.childNodes[0] as HTMLTemplateElement).content.firstChild,
+      '<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/binding.template/spec/nativeTemplateEngineBehaviors.ts b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
index f704b3126..9d659bf35 100644
--- a/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
+++ b/packages/binding.template/spec/nativeTemplateEngineBehaviors.ts
@@ -222,6 +222,58 @@ 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)
+      expectContainText(template.content.childNodes[0], '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)
+      expectContainText(template.content.childNodes[0], 'Value: abc')
+    })
+
+    it('should set $data when binding a DIV that is inside a 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)
+      expectContainText(div.childNodes[0], 'Value: abc')
+    })
+
+    it('should bind a node attached to a ShadowRoot', function () {
+      // Mirrors the original PR motivation: applyBindings on a node that
+      // lives inside a ShadowRoot should resolve $data and set up bindings
+      // the same way it does for a node in the light DOM.
+      const host = document.createElement('div')
+      testNode.appendChild(host)
+      const shadow = host.attachShadow({ mode: 'open' })
+      const inner = document.createElement('div') as HTMLDivElement
+      inner.innerHTML =
+        "<div data-bind='template: { data: someItem }'>" + "Value: <span data-bind='text: $data.val'></span>" + '</div>'
+      shadow.appendChild(inner)
+
+      applyBindings({ someItem: { val: 'abc' } }, inner)
+      expectContainText(inner.childNodes[0], '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/spec/domNodeDisposalBehaviors.ts b/packages/utils/spec/domNodeDisposalBehaviors.ts
index 747891bf0..512dbf66a 100644
--- a/packages/utils/spec/domNodeDisposalBehaviors.ts
+++ b/packages/utils/spec/domNodeDisposalBehaviors.ts
@@ -64,6 +64,51 @@ describe('DOM node disposal', function () {
     expect(testNode.childNodes.length).to.equal(0)
   })
 
+  it('Should run registered disposal callbacks on descendants inside a <template>.content fragment when the template host subtree is cleaned', function () {
+    // Regression: <template>.content is a detached DocumentFragment that
+    // getElementsByTagName('*') / querySelectorAll('*') do not traverse,
+    // so cleanNode must recurse into it explicitly. Without this, bindings
+    // and subscriptions inside templates leak.
+    const template = document.createElement('template') as HTMLTemplateElement
+    const innerDiv = document.createElement('div')
+    const innerSpan = document.createElement('span')
+    innerDiv.appendChild(innerSpan)
+    template.content.appendChild(innerDiv)
+    testNode.appendChild(template)
+
+    let didRunCount = 0
+    const callback = function () {
+      didRunCount++
+    }
+    addDisposeCallback(innerDiv, callback)
+    addDisposeCallback(innerSpan, callback)
+
+    expect(didRunCount).to.equal(0)
+    cleanNode(testNode)
+    expect(didRunCount).to.equal(2)
+  })
+
+  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)
+
+    const array = [fragment, childNode, spanNode]
+    array.forEach(node => {
+      addDisposeCallback(node, function () {
+        didRunCount++
+      })
+    })
+
+    expect(didRunCount).to.equals(0)
+    cleanNode(fragment)
+    expect(didRunCount).to.equals(array.length)
+  })
+
   it('Should be able to remove previously-registered disposal callbacks', function () {
     let didRun = false
     const callback = function () {
diff --git a/packages/utils/spec/utilsDomBehaviors.ts b/packages/utils/spec/utilsDomBehaviors.ts
index 4bcb8ab71..a2ae1870d 100644
--- a/packages/utils/spec/utilsDomBehaviors.ts
+++ b/packages/utils/spec/utilsDomBehaviors.ts
@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 
 import * as utils from '../dist'
-import { registerEventHandler, virtualElements } from '../dist'
+import { domNodeIsContainedBy, registerEventHandler, virtualElements } from '../dist'
 import options from '../dist/options'
 import type { KnockoutInstance } from '@tko/builder'
 import { prepareTestNode, restoreAfter } from '../helpers/mocha-test-helpers'
@@ -18,6 +18,78 @@ describe('startCommentRegex', function () {
   })
 })
 
+describe('DOM-Info Tool', function () {
+  it('domNodeIsContainedBy with special values', function () {
+    const parent = document.createElement('div')
+    const test = document.createDocumentFragment()
+
+    expect(domNodeIsContainedBy(parent, test)).to.equals(false)
+    expect(domNodeIsContainedBy(test, parent)).to.equals(false)
+
+    expect(domNodeIsContainedBy(parent, undefined)).to.equals(false)
+    expect(domNodeIsContainedBy(parent, null)).to.equals(false)
+    expect(domNodeIsContainedBy(null, parent)).to.equals(false)
+
+    test.appendChild(parent)
+
+    expect(domNodeIsContainedBy(parent, test)).to.equals(true)
+    expect(domNodeIsContainedBy(test, parent)).to.equals(false)
+
+    const testDiv = document.createElement('div')
+    const template = document.createElement('template')
+    template.content.appendChild(testDiv)
+    expect(domNodeIsContainedBy(testDiv, template)).to.equals(false) //Because template.content is a DocumentFragment
+    expect(domNodeIsContainedBy(testDiv, template.content)).to.equals(true)
+
+    parent.appendChild(template)
+    expect(domNodeIsContainedBy(template, parent)).to.equals(true)
+    expect(domNodeIsContainedBy(template, test)).to.equals(true)
+    expect(domNodeIsContainedBy(testDiv, parent)).to.equals(false) //Because template.content is a DocumentFragment
+  })
+
+  it('Parent Node contains child', function () {
+    const parent = document.createElement('div')
+    const child = document.createElement('span')
+    parent.appendChild(child)
+
+    expect(domNodeIsContainedBy(child, parent)).to.equals(true)
+  })
+
+  it('Node not contains node', function () {
+    const parent = document.createElement('div')
+    const child = document.createElement('span')
+
+    expect(domNodeIsContainedBy(child, parent)).to.equals(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)).to.equals(true)
+    expect(domNodeIsContainedBy(subchild, child)).to.equals(true)
+    expect(domNodeIsContainedBy(subchild, subchild)).to.equals(true)
+    expect(domNodeIsContainedBy(node, parent)).to.equals(false)
+  })
+
+  it('ShadowRoot contains its descendants but its host does not', function () {
+    const host = document.createElement('div')
+    const shadow = host.attachShadow({ mode: 'open' })
+    const child = document.createElement('span')
+    shadow.appendChild(child)
+
+    expect(domNodeIsContainedBy(child, shadow)).to.equals(true)
+    // Like template.content, the shadow root is a DocumentFragment whose
+    // descendants are not part of the host's light-DOM subtree.
+    expect(domNodeIsContainedBy(child, host)).to.equals(false)
+  })
+})
+
 describe('setTextContent', function () {
   let element: HTMLElement
 
diff --git a/packages/utils/src/dom/disposal.ts b/packages/utils/src/dom/disposal.ts
index 454ac35e3..a80566b7a 100644
--- a/packages/utils/src/dom/disposal.ts
+++ b/packages/utils/src/dom/disposal.ts
@@ -5,14 +5,16 @@
 import * as domData from './data'
 import { default as options } from '../options'
 import { arrayRemoveItem, arrayIndexOf } from '../array'
+import { isTemplateTag } from './info'
 
 const domDataKey = domData.nextKey()
 // Node types:
 // 1: Element
 // 8: Comment
 // 9: Document
-const cleanableNodeTypes = { 1: true, 8: true, 9: true }
-const cleanableNodeTypesWithDescendants = { 1: true, 9: true }
+// 11: DocumentFragment
+const cleanableNodeTypes = { 1: true, 8: true, 9: true, 11: true }
+const cleanableNodeTypesWithDescendants = { 1: true, 9: true, 11: true }
 
 function getDisposeCallbacksCollection(node: Node, createIfNotFound: boolean) {
   let allDisposeCallbacks = domData.get(node, domDataKey)
@@ -86,14 +88,32 @@ 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.nodeType === Node.ELEMENT_NODE) {
+        cleanNodesInList((node as Element).getElementsByTagName('*'))
+      } else if (node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        cleanNodesInList((node as Document | DocumentFragment).querySelectorAll('*'))
+      }
+
+      // <template>.content is a detached DocumentFragment that the descendant
+      // queries above do not traverse into; recurse so bindings created inside
+      // template content are disposed when the host subtree is cleaned.
+      if (isTemplateTag(node)) {
+        cleanNode(node.content)
+      }
+      const root = node as Partial<ParentNode>
+      if (typeof root.querySelectorAll === 'function') {
+        const templates = root.querySelectorAll('template')
+        for (let i = 0; i < templates.length; i++) {
+          cleanNode((templates[i] as HTMLTemplateElement).content)
+        }
+      }
     }
   }
   return node
diff --git a/packages/utils/src/dom/info.ts b/packages/utils/src/dom/info.ts
index 3fed3fb18..00c8a7f72 100644
--- a/packages/utils/src/dom/info.ts
+++ b/packages/utils/src/dom/info.ts
@@ -3,18 +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
-  } // Fixes issue #1162 - can't use node.contains for document fragments on IE8
+  }
+  // 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) & 16) == 16
+    return (
+      (containedByNode.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_CONTAINED_BY) ===
+      Node.DOCUMENT_POSITION_CONTAINED_BY
+    )
   }
 
   let parentNode: Node | null = node
@@ -24,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) {
@@ -39,7 +48,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 {
@@ -47,7 +60,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 4c4001f94..e3d5ecf7a 100644
--- a/packages/utils/src/dom/virtualElements.ts
+++ b/packages/utils/src/dom/virtualElements.ts
@@ -13,7 +13,7 @@
 
 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'
 
@@ -114,11 +114,15 @@ export const allowedBindings: VirtualElementsAllowedBindings = Object.create(nul
 export const hasBindingValue = isStartComment
 
 export function childNodes(node: Node): any {
-  return isStartComment(node) ? getVirtualChildren(node) : node.childNodes
+  if (isStartComment(node)) return getVirtualChildren(node)
+  if (isTemplateTag(node)) return node.content.childNodes
+  return node.childNodes
 }
 
 export function emptyNode(node: Node) {
-  if (!isStartComment(node)) {
+  if (isTemplateTag(node)) {
+    emptyDomNode(node.content)
+  } else if (!isStartComment(node)) {
     emptyDomNode(node)
   } else {
     const virtualChildren = childNodes(node)
@@ -129,7 +133,9 @@ export function emptyNode(node: Node) {
 }
 
 export function setDomNodeChildren(node: Node, childNodes: Node[]) {
-  if (!isStartComment(node)) {
+  if (isTemplateTag(node)) {
+    setRegularDomNodeChildren(node.content, childNodes)
+  } else if (!isStartComment(node)) {
     setRegularDomNodeChildren(node, childNodes)
   } else {
     emptyNode(node)
@@ -173,6 +179,10 @@ export function insertAfter(containerNode: Node, nodeToInsert: Node, insertAfter
 }
 
 export function firstChild(node: Node) {
+  if (isTemplateTag(node)) {
+    return node.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)