导航栏: 首页 评论列表

shadow DOM 的 innerHTML 问题

默认分类 2020/12/02 04:06

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)
  }
}


>> 留言评论