shadow DOM 的 slot 问题

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

/* global Array*/
'use strict';

function parseslot(item) {
  let root = item.getRootNode()
  let host = root && root.host ? root.host : document
  // debugger
  // < slot>
  if (item.name) {
    let list = host.querySelectorAll('[slot="' + item.name + '"]')
    if (list.length) {
      list.forEach(elem => {
        elem.__widget = ''
        item.parentNode.insertBefore(elem, item)
      })
      // list.removeAttribute('slot')
    }
  } else if (host && host.childNodes && host.childNodes.length) {
    Array.prototype.slice.call(host.childNodes).forEach(elem => {
      elem.__widget = ''
      item.parentNode.insertBefore(elem, item)
    })
  } else if (host && host.childNodes && !host.childNodes.length) {
    item.parentNode.removeChild(item)
  }
}

function walkslot(node, root) {
  if (String(node.tagName).toLowerCase() === 'style') return ''
  if (String(node.tagName).toLowerCase() === 'slot') return parseslot(node)

  if (node.shadowRoot) {
    Array.prototype.slice.call(node.shadowRoot.childNodes).forEach(item => {
      walkslot(item)
    })
  }
  else if (node.childNodes) {
    Array.prototype.slice.call(node.childNodes).forEach(item => {
      walkslot(item)
    })
  }
}

function walktree(node, notroot) {
  // if (!notroot) walkslot(node)
  if (node.shadowRoot) {
    if (!node.shadowRoot.childNodes) {
      return node.parentNode.removeChild(node)
    }
    Array.prototype.slice.call(node.shadowRoot.childNodes).forEach(elem => {
      walktree(elem, 'notroot')
      elem.__widget = ''
      node.parentNode.insertBefore(elem, node)
    })
  }
  else if (node.childNodes) {
    Array.prototype.slice.call(node.childNodes).forEach(item => {
      walktree(item, 'notroot')
    })
  }
}

// walkslot(document.body)
// walktree(document.body)

function insertHolder(node) {
  // if (!notroot) walkslot(node)
  if (node.shadowRoot) {
    let host = node.shadowRoot.host

    var div = document.createElement('div')
    div.innerHTML = '<'+'div>123</'+'div><'+'div>123</'+'div><'+'div>123</'+'div>'
    host.parentNode.insertBefore(div, host)

    Array.prototype.slice.call(node.shadowRoot.childNodes).forEach(elem => {
      insertHolder(elem)
    })
  }
  if (node.childNodes) {
    Array.prototype.slice.call(node.childNodes).forEach(item => {
      insertHolder(item)
    })
  }
}

>> 留言评论