Is it possible to have nested JavaScript template tags e.g.
Code snippet does not support XHTML, I have to use iframe with data URL:
Yes, it is possible to have nested tags in HTML DOM:
productScript = document.createElement('script')
productScript.setAttribute('id', 'Product')
productScript.setAttribute('type', 'text/html')
productScript.appendChild(document.createTextNode('outer'))
product = document.createElement('div')
product.setAttribute('class', 'product')
product.appendChild(document.createTextNode(`
....
`))
features = document.createElement('div')
features.setAttribute('class', 'features')
featuresScript = document.createElement('script')
featuresScript.setAttribute('id', 'Features')
featuresScript.setAttribute('type', 'text/html')
featuresScript.appendChild(document.createTextNode('inner'))
feature = document.createElement('div')
feature.setAttribute('class', 'feature')
feature.appendChild(document.createTextNode(`
...
`))
featuresScript.appendChild(feature)
features.appendChild(featuresScript)
product.appendChild(document.createTextNode(`
...
`))
product.appendChild(features)
productScript.appendChild(product)
document.body.appendChild(productScript)
script[type="text/html"] {
display: block;
font-family: monospace;
white-space: pre;
padding-left: 10px;
border-left: 10px solid #D6F034
}
No, it is not possible to have nested tags in HTML serialization. Its content is not parsed:
let product = document.getElementById('Product')
console.log(product.textContent)