diff --git a/package.json b/package.json
index e1500ec..32ddc35 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "src"
   ],
   "dependencies": {
-    "htmlparser2": "~10.1.0"
+    "htmlparser2": "~12.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "latest",
@@ -48,7 +48,7 @@
     "standard-version": "latest"
   },
   "engines": {
-    "node": ">= 10"
+    "node": ">= 20.19"
   },
   "files": [
     "src"
diff --git a/src/index.js b/src/index.js
index c38b0ae..2dc7aa2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,58 +1,78 @@
 'use strict'
 
-const { dirname, join } = require('path')
-
 const { Parser } = require('htmlparser2')
-const Tokenizer = require(join(
-  dirname(require.resolve('htmlparser2')),
-  'Tokenizer.js'
-)).default
-
-// htmlparser2 treats title/textarea/style/script as raw text everywhere.
-// In svg/math that is only true for HTML, so parse those tags as markup.
-const IN_TAG_NAME = 3
-
-class ForeignTokenizer extends Tokenizer {
-  stateBeforeSpecialS (char) {
-    if (this.cbs.foreignContext[0] === true) {
-      this.state = IN_TAG_NAME
-      this.stateInTagName(char)
-      return
-    }
-    super.stateBeforeSpecialS(char)
-  }
 
-  stateBeforeSpecialT (char) {
-    if (this.cbs.foreignContext[0] === true) {
-      this.state = IN_TAG_NAME
-      this.stateInTagName(char)
-      return
-    }
-    super.stateBeforeSpecialT(char)
-  }
-}
+const HTML = 'html'
+const SVG = 'svg'
+const MATH = 'math'
+const ANNOTATION_XML = 'annotation-xml'
 
-// svg/math are foreign content. These elements switch back to HTML.
-// annotation-xml does that only with an HTML encoding, so it is handled apart.
-const FOREIGN_ELEMENTS = new Set(['math', 'svg'])
-const HTML_INTEGRATION_ELEMENTS = new Set([
+const SVG_HTML_INTEGRATION_POINTS = new Set([
   'desc',
+  'foreignObject',
   'foreignobject',
-  'mi',
-  'mn',
-  'mo',
-  'ms',
-  'mtext',
   'title'
 ])
-// style, textarea, xmp, and script are raw in HTML via the tokenizer.
-const RAW_TEXT_ELEMENTS = new Set([
-  'iframe',
-  'noembed',
-  'noframes',
-  'noscript',
-  'plaintext'
+const MATH_TEXT_INTEGRATION_POINTS = new Set(['mi', 'mn', 'mo', 'ms', 'mtext'])
+// These stay in MathML even when the current node is a text integration point.
+const MATH_TEXT_INTEGRATION_EXCEPTIONS = new Set(['malignmark', 'mglyph'])
+
+const FOREIGN_CONTENT_BREAKOUT_ELEMENTS = new Set([
+  'b',
+  'big',
+  'blockquote',
+  'body',
+  'br',
+  'center',
+  'code',
+  'dd',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'hr',
+  'i',
+  'img',
+  'li',
+  'listing',
+  'menu',
+  'meta',
+  'nobr',
+  'ol',
+  'p',
+  'pre',
+  'ruby',
+  's',
+  'small',
+  'span',
+  'strike',
+  'strong',
+  'sub',
+  'sup',
+  'table',
+  'tt',
+  'u',
+  'ul',
+  'var'
+])
+const FONT_BREAKOUT_ATTRIBUTES = new Set(['color', 'face', 'size'])
+const INTEGRATION_CANDIDATES = new Set([
+  ...SVG_HTML_INTEGRATION_POINTS,
+  ...MATH_TEXT_INTEGRATION_POINTS,
+  ANNOTATION_XML
 ])
+const NAMESPACE_STACK_ELEMENTS = new Set([SVG, MATH, ...INTEGRATION_CANDIDATES])
+
+const NOSCRIPT_END = /<\/noscript[\t\n\f\r />]/gi
+
 const getValue = (value, quote) => {
   if (quote === undefined) return true
   if (value === '1') return true
@@ -64,118 +84,133 @@ const isHtmlEncoding = value => {
   return mime === 'text/html' || mime === 'application/xhtml+xml'
 }
 
-const isWhitespace = code =>
-  code === 9 || code === 10 || code === 12 || code === 13 || code === 32
-
-// Index of the `</script` that ends an HTML script, or the end of the string.
-const findScriptEnd = (source, from) => {
-  for (
-    let index = source.indexOf('<', from);
-    index !== -1;
-    index = source.indexOf('<', index + 1)
-  ) {
-    if (source.slice(index, index + 8).toLowerCase() !== '</script') continue
-    const next = source.charCodeAt(index + 8)
-    if (next === 62 || isWhitespace(next)) return index
+const isIntegrationPoint = (namespace, name, encoding) => {
+  if (namespace === SVG) return SVG_HTML_INTEGRATION_POINTS.has(name)
+  if (namespace !== MATH) return false
+  if (name === ANNOTATION_XML) {
+    return encoding !== null && isHtmlEncoding(encoding)
   }
-  return source.length
+  return MATH_TEXT_INTEGRATION_POINTS.has(name)
+}
+
+const findNoscriptEnd = (source, from) => {
+  NOSCRIPT_END.lastIndex = from
+  const match = NOSCRIPT_END.exec(source)
+  return match === null ? source.length : match.index
 }
 
-const isForeignContextElement = name =>
-  FOREIGN_ELEMENTS.has(name) || HTML_INTEGRATION_ELEMENTS.has(name)
+// The tokenizer increments index after this callback returns.
+const continueTokenizingFrom = (parser, index) => {
+  parser.tokenizer.index = index - 1
+}
 
 module.exports = html => {
   const source = String(html)
   const scripts = []
+  const namespaces = [HTML]
+  const templates = []
+  const mathAnnotationDepths = []
+  const mathTextIntegrationDepths = []
+  const mathExceptionDepths = []
+  let depth = 0
+  let htmlTemplateDepth = 0
+  let tagName = ''
   let attributes = null
-  let templateDepth = 0
-  let isInScript = false
-  // Taken when the script opens. htmlparser2 pops an integration point
-  // before the implied close, so the close event is too late to read.
-  let scriptInForeign = false
-  // htmlparser2 drops script-data mode on `<script/>` and then swallows the
-  // real `</script>`. Events before this index are still that script's text.
-  let scriptEnd = -1
-  let rawText = null
-  let sawAnnotation = false
-  let annotationHtml = false
-  let sawAnnotationEncoding = false
-  const annotationHtmlStack = []
-  const foreignContext = [false]
-  const leaveScriptIfEnded = () => {
-    if (scriptEnd !== -1 && parser.endIndex >= scriptEnd) {
-      isInScript = false
-      scriptEnd = -1
+  let encoding = null
+  let hasFontBreakoutAttribute = false
+
+  const isInForeignContent = () => namespaces[0] !== HTML
+
+  const isChildOfMathAnnotation = () => mathAnnotationDepths[0] === depth - 1
+
+  const isMathTextIntegrationException = name =>
+    MATH_TEXT_INTEGRATION_EXCEPTIONS.has(name) &&
+    mathTextIntegrationDepths[0] === depth - 1
+
+  const namespaceOfNested = name => {
+    if (!isInForeignContent()) return name
+    if (name === SVG && isChildOfMathAnnotation()) return SVG
+    return namespaces[0]
+  }
+
+  const breakOutOfForeignContent = () => {
+    for (let index = 0; namespaces[index] !== HTML; index++) {
+      namespaces[index] = HTML
     }
   }
-  const parser = new Parser(
-    {
-      onopentagname: name => {
-        leaveScriptIfEnded()
-        attributes = null
-        if (isInScript || rawText) return
-        if (FOREIGN_ELEMENTS.has(name)) foreignContext.unshift(true)
-        else if (HTML_INTEGRATION_ELEMENTS.has(name)) {
-          foreignContext.unshift(false)
-        }
-        if (name === 'annotation-xml') sawAnnotation = true
-        // These elements are raw text in HTML only. In svg/math they are markup.
-        if (RAW_TEXT_ELEMENTS.has(name) && foreignContext[0] !== true) {
-          rawText = name
-          return
-        }
-        if (name === 'template') templateDepth++
-        if (name !== 'script') return
-        scriptInForeign = foreignContext[0] === true
-        // A foreign script does not swallow the markup inside it.
-        if (!scriptInForeign) isInScript = true
-        if (templateDepth === 0) {
-          attributes = {}
-          scripts.push(attributes)
-        }
-      },
-      onattribute: (name, value, quote) => {
-        if (sawAnnotation && name === 'encoding' && !sawAnnotationEncoding) {
-          sawAnnotationEncoding = true
-          annotationHtml = isHtmlEncoding(value)
-        }
-        if (attributes) attributes[name] = getValue(value, quote)
-      },
-      onopentag: name => {
-        if (name === 'annotation-xml' && sawAnnotation) {
-          annotationHtmlStack.unshift(annotationHtml)
-          if (annotationHtml) foreignContext.unshift(false)
-          sawAnnotation = false
-          annotationHtml = false
-          sawAnnotationEncoding = false
-        }
-        if (name !== 'script' || !isInScript) return
-        scriptEnd = findScriptEnd(source, parser.endIndex + 1)
-      },
-      onclosetag: (name, isImplied) => {
-        leaveScriptIfEnded()
-        if (rawText) {
-          if (name === rawText && name !== 'plaintext') rawText = null
-          return
-        }
-        if (name === 'script') {
-          if (!isImplied || scriptInForeign) {
-            isInScript = false
-            scriptEnd = -1
-          }
-          return
+
+  const parser = new Parser({
+    onopentagname: name => {
+      depth++
+      tagName = name
+      attributes = null
+      encoding = null
+      hasFontBreakoutAttribute = false
+      if (FOREIGN_CONTENT_BREAKOUT_ELEMENTS.has(name)) {
+        breakOutOfForeignContent()
+      }
+      if (name === SVG || name === MATH) {
+        namespaces.unshift(namespaceOfNested(name))
+      } else if (isMathTextIntegrationException(name)) {
+        namespaces.unshift(MATH)
+        mathExceptionDepths.unshift(depth)
+      } else if (name === 'template') {
+        const isHtmlTemplate = !isInForeignContent()
+        templates.unshift(isHtmlTemplate)
+        if (isHtmlTemplate) htmlTemplateDepth++
+      } else if (name === 'script' && htmlTemplateDepth === 0) {
+        attributes = {}
+      }
+    },
+    onattribute: (name, value, quote) => {
+      if (attributes !== null) {
+        attributes[name] = getValue(value, quote)
+      } else if (tagName === ANNOTATION_XML) {
+        if (name === 'encoding' && encoding === null) encoding = value
+      } else if (tagName === 'font' && FONT_BREAKOUT_ATTRIBUTES.has(name)) {
+        hasFontBreakoutAttribute = true
+      }
+    },
+    onopentag: name => {
+      if (attributes !== null) {
+        scripts.push(attributes)
+      } else if (INTEGRATION_CANDIDATES.has(name)) {
+        const namespace = namespaces[0]
+        const isHtml = isIntegrationPoint(namespace, name, encoding)
+        namespaces.unshift(isHtml ? HTML : namespace)
+        if (name === ANNOTATION_XML && namespace === MATH) {
+          mathAnnotationDepths.unshift(depth)
+        } else if (isHtml && MATH_TEXT_INTEGRATION_POINTS.has(name)) {
+          mathTextIntegrationDepths.unshift(depth)
         }
-        if (isInScript) return
-        if (name === 'annotation-xml') {
-          if (annotationHtmlStack.shift()) foreignContext.shift()
-          return
+      } else if (name === 'noscript') {
+        if (!isInForeignContent()) {
+          continueTokenizingFrom(
+            parser,
+            findNoscriptEnd(source, parser.endIndex + 1)
+          )
         }
-        if (isForeignContextElement(name)) foreignContext.shift()
-        if (name === 'template' && templateDepth > 0) templateDepth--
+      } else if (name === 'font' && hasFontBreakoutAttribute) {
+        breakOutOfForeignContent()
       }
     },
-    { Tokenizer: ForeignTokenizer }
-  )
+    onclosetag: name => {
+      if (mathExceptionDepths[0] === depth) {
+        mathExceptionDepths.shift()
+        namespaces.shift()
+      } else if (NAMESPACE_STACK_ELEMENTS.has(name)) {
+        namespaces.shift()
+        if (mathAnnotationDepths[0] === depth) mathAnnotationDepths.shift()
+        if (mathTextIntegrationDepths[0] === depth) {
+          mathTextIntegrationDepths.shift()
+        }
+      } else if (name === 'template' && templates.shift()) {
+        htmlTemplateDepth--
+      }
+      depth--
+    }
+  })
+  parser.isInForeignContext = isInForeignContent
   parser.end(source)
   return scripts
 }
diff --git a/test/index.js b/test/index.js
index 644862a..941de3e 100644
--- a/test/index.js
+++ b/test/index.js
@@ -294,7 +294,16 @@ test('an end tag inside a script does not close the element around it', t => {
 })
 
 test('raw text elements hide the scripts inside them', t => {
-  for (const tag of ['iframe', 'noembed', 'noframes', 'noscript']) {
+  for (const tag of [
+    'iframe',
+    'noembed',
+    'noframes',
+    'noscript',
+    'style',
+    'textarea',
+    'title',
+    'xmp'
+  ]) {
     t.deepEqual(
       parseIframe(
         `<${tag}><script src="/a.js"></script></${tag}><script src="/b.js"></script>`
@@ -345,3 +354,269 @@ test('a stray </template> after a self-closing script keeps later scripts', t =>
     [{ src: '/a.js' }, { src: '/b.js' }]
   )
 })
+
+test('noscript ends at its own end tag', t => {
+  const cases = [
+    '<noscript><noembed></noscript><script src="/a.js"></script>',
+    '<noscript><iframe></noscript><script src="/a.js"></script>',
+    '<noscript><script></noscript><script src="/a.js"></script>',
+    '<div><noscript></div><script src="/x.js"></script></noscript><script src="/a.js"></script>',
+    '<noscript><template></noscript ><script src="/a.js"></script>',
+    '<noscript></noscript/><script src="/a.js"></script>'
+  ]
+  for (const html of cases) {
+    t.deepEqual(parseIframe(html), [{ src: '/a.js' }], html)
+  }
+  t.deepEqual(parseIframe('<noscript><script src="/a.js"></script>'), [])
+  for (const gap of [' ', '\n', '\t', '\r', '\f']) {
+    t.deepEqual(
+      parseIframe(`<noscript></noscript${gap}><script src="/a.js"></script>`),
+      [{ src: '/a.js' }],
+      JSON.stringify(gap)
+    )
+  }
+  t.deepEqual(
+    parseIframe('<NOSCRIPT></NOSCRIPT><script src="/a.js"></script>'),
+    [{ src: '/a.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<noscript></noscript><script src="/a.js"></script><noscript></noscript><script src="/b.js"></script>'
+    ),
+    [{ src: '/a.js' }, { src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<noscript></noscript <script src="/a.js"></script><script src="/b.js"></script>'
+    ),
+    [{ src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg><noscript><script src="/a.js"></script></noscript><script src="/b.js"/></svg>'
+    ),
+    [{ src: '/a.js' }, { src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg><foreignObject><noscript><script src="/a.js"></script></noscript><script src="/b.js"></script></foreignObject></svg>'
+    ),
+    [{ src: '/b.js' }]
+  )
+})
+
+test('integration points depend on the namespace', t => {
+  const cases = [
+    '<math><title/><script src="/a.js"/><script src="/b.js"></script></math>',
+    '<svg><desc/><script src="/a.js"/><script src="/b.js"></script></svg>',
+    '<svg><mi><script src="/a.js"/><script src="/b.js"></script></mi></svg>'
+  ]
+  for (const html of cases) {
+    t.deepEqual(parseIframe(html), [{ src: '/a.js' }, { src: '/b.js' }], html)
+  }
+  t.deepEqual(
+    parseIframe(
+      '<svg><annotation-xml><foreignObject><script src="/a.js"/><script src="/b.js"></script></foreignObject></annotation-xml></svg>'
+    ),
+    [{ src: '/a.js' }]
+  )
+})
+
+test('html start tags break out of foreign content', t => {
+  const tags = [
+    'b',
+    'big',
+    'blockquote',
+    'body',
+    'br',
+    'center',
+    'code',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'hr',
+    'i',
+    'img',
+    'li',
+    'listing',
+    'menu',
+    'meta',
+    'nobr',
+    'ol',
+    'p',
+    'pre',
+    'ruby',
+    's',
+    'small',
+    'span',
+    'strike',
+    'strong',
+    'sub',
+    'sup',
+    'table',
+    'tt',
+    'u',
+    'ul',
+    'var'
+  ]
+  for (const tag of tags) {
+    t.deepEqual(
+      parseIframe(
+        `<svg><${tag}><style><script src="/a.js"></script></style><script src="/b.js"></script>`
+      ),
+      [{ src: '/b.js' }],
+      tag
+    )
+  }
+  t.deepEqual(
+    parseIframe(
+      '<svg></p><style><script src="/a.js"></script></style><script src="/b.js"></script>'
+    ),
+    [{ src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg></br><style><script src="/a.js"></script></style><script src="/b.js"></script>'
+    ),
+    [{ src: '/b.js' }]
+  )
+  for (const attribute of ['color', 'face', 'size', 'COLOR']) {
+    t.deepEqual(
+      parseIframe(
+        `<svg><font ${attribute}="red"><style><script src="/a.js"></script></style></svg>`
+      ),
+      [],
+      attribute
+    )
+  }
+  t.deepEqual(
+    parseIframe(
+      '<svg><font color><style><script src="/a.js"></script></style>'
+    ),
+    []
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg><font><style><script src="/a.js"></script></style></font></svg>'
+    ),
+    [{ src: '/a.js' }]
+  )
+})
+
+test('a template inside svg is not inert', t => {
+  t.deepEqual(
+    parseIframe(
+      '<svg><template><script src="/a.js"></script></template></svg>'
+    ),
+    [{ src: '/a.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<template><svg><template></template></svg><script src="/x.js"></script></template><script src="/a.js"></script>'
+    ),
+    [{ src: '/a.js' }]
+  )
+})
+
+test('svg and math keep the namespace they are nested in', t => {
+  t.deepEqual(
+    parseIframe(
+      '<math><svg><annotation-xml encoding="text/html"><style><script src="/a.js"></script></style></annotation-xml></svg></math>'
+    ),
+    []
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg><math><desc><style><script src="/a.js"></script></style></desc></math></svg>'
+    ),
+    []
+  )
+})
+
+test('a script tag cut off at the end of the input is not a script', t => {
+  t.deepEqual(parseIframe('<script src="/a'), [])
+  t.deepEqual(parseIframe('<p><script src="/a.js"></script><script src="/b'), [
+    { src: '/a.js' }
+  ])
+})
+
+test('mglyph and malignmark inside a math text integration point stay in math', t => {
+  const cases = [
+    '<math><mi><mglyph><style><script src="/a.js"></script></style></mglyph></mi><script src="/b.js"/></math>',
+    '<math><mo><malignmark><style><script src="/a.js"></script></style></malignmark></mo><script src="/b.js"/></math>',
+    '<math><mn><mglyph><script src="/a.js"/></mglyph></mn><script src="/b.js"/></math>',
+    '<math><ms><malignmark><script src="/a.js"/></malignmark></ms><script src="/b.js"/></math>',
+    '<math><mtext><mglyph><style><script src="/a.js"></script></style></mglyph></mtext><script src="/b.js"/></math>',
+    '<math><mi><MGLYPH><style><script src="/a.js"></script></style></MGLYPH></mi><script src="/b.js"/></math>'
+  ]
+  for (const html of cases) {
+    t.deepEqual(parseIframe(html), [{ src: '/a.js' }, { src: '/b.js' }], html)
+  }
+  t.deepEqual(
+    parseIframe(
+      '<math><mglyph><script src="/a.js"/></mglyph><script src="/b.js"/></math>'
+    ),
+    [{ src: '/a.js' }, { src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<svg><foreignObject><mglyph><script src="/a.js"/></mglyph><script src="/b.js"></script></foreignObject></svg>'
+    ),
+    [{ src: '/a.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<mi><mglyph><style><script src="/a.js"></script></style></mglyph><script src="/b.js"></script>'
+    ),
+    [{ src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<math><mi><mglyph></mglyph></mi><script src="/a.js"/><script src="/b.js"/></math>'
+    ),
+    [{ src: '/a.js' }, { src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<math><mi><mrow><mglyph><style><script src="/a.js"></script></style></mglyph></mrow></mi><script src="/b.js"/></math>'
+    ),
+    [{ src: '/b.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<math><mi><mglyph/><script src="/a.js"/></mi><script src="/b.js"/></math>'
+    ),
+    [{ src: '/a.js' }]
+  )
+})
+
+test('svg directly inside a math annotation-xml is svg', t => {
+  t.deepEqual(
+    parseIframe(
+      '<math><annotation-xml><svg><desc><style><script src="/a.js"></script></style></desc></svg></annotation-xml></math>'
+    ),
+    []
+  )
+  t.deepEqual(
+    parseIframe(
+      '<math><annotation-xml><mrow><svg><desc><style><script src="/a.js"></script></style></desc></svg></mrow></annotation-xml></math>'
+    ),
+    [{ src: '/a.js' }]
+  )
+  t.deepEqual(
+    parseIframe(
+      '<math><annotation-xml><mi></mi><svg><desc><style><script src="/a.js"></script></style></desc></svg></annotation-xml></math>'
+    ),
+    []
+  )
+})