shadow DOM 的 innerHTML 问题
'use strict';
window.getOuterHTML = function(node, rmcss, root) {
if (!root) root = node
if (rmcss && String(node.tagName).toLowerCase() === 'style') {
root.cssFileList = root.cssFileList || []
if (!root.cssFileList.includes(node.outerHTML)) root.cssFileList.push(node.outerHTML)
let fname = (node.innerHTML.split('/*# sourceURL=')[1] || '')
return '<style>/*# sourceURL=' + fname + '</style>'
}
let pre, end
let arr
if (node.innerHTML) {
arr = node.outerHTML.split(node.innerHTML)
pre = arr[0]
end = arr[1]
} else {
end = '</' + String(node.tagName).toLowerCase() + '>'
arr = node.outerHTML.split(end)
arr.pop()
pre = arr.join(end)
}
const aa = pre
const bb = end
const innerHTML = window.getInnerHTML(node, rmcss, root)
const outerHTML = aa + innerHTML + bb
return outerHTML
}
window.getInnerHTML = function(node, rmcss, root) {
if (!root) root = node
const innerHTML = [...node.childNodes].map(node => {
return window.nodeToString(node, rmcss, root)
}).join('\n')
let shadow
if (node.shadowRoot) shadow = window.getInnerHTML(node.shadowRoot, rmcss, root)
else shadow = ''
const inner = (root === node && root.cssFileList ? root.cssFileList.join('\n') : '') + innerHTML + shadow
return inner
}
window.nodeToString = function(node, rmcss, root) {
switch (node.nodeType) {
case document.ELEMENT_NODE:
return window.getOuterHTML(node, rmcss, root)
// new XMLSerializer().serializeToString(node)
case document.TEXT_NODE:
return node.textContent
// new XMLSerializer().serializeToString(node)
case document.COMMENT_NODE:
return '<!--' + node.textContent + '-->'
// new XMLSerializer().serializeToString(node)
case document.DOCUMENT_TYPE_NODE:
let doctypeString = ['<!DOCTYPE ',
node.name,
(node.publicId ? ' PUBLIC "' + node.publicId + '"' : ''),
(!node.publicId && node.systemId ? ' SYSTEM' : ''),
(node.systemId ? ' "' + node.systemId + '"' : ''),
'>'
].join('')
return doctypeString
// new XMLSerializer().serializeToString(node)
default:
throw new TypeError('Unexpected nodeType: ' + node.nodeType)
}
}