使用web component api 实现自定义组件的时候，如果两个函数名冲突，第二个会覆盖第一个，有没有办法让函数隔离？

<script type="text/x-template" id="demo">
    <template>
      <button onclick="handleclick()">btn</button>
    </template>

    <script>
      function handleclick() { console.log(2222) }
    </script>
</script>

function render(id) {
  const xTemplate = document.getElementById(id)
  let div = document.createElement('div')
  div.innerHTML = xTemplate.innerHTML

  const html = div.getElementsByTagName('template')[0]
  const style = div.getElementsByTagName('style')[0]
  const script = div.getElementsByTagName('script')[0]

  div = null

  const template = document.createElement('template')
  template.id = id
  if (html) {
    template.content.append(html.content)
  }
  if (style) {
    template.content.append(style)
  }
  if (script) {
    const el = document.createElement('script')
    el.innerHTML = script.innerHTML
    template.content.append(el)
  }

  const component = Object.create(null)
  component.tag = id + '-component'
  component.el = document.createElement(component.tag)

  class Component extends HTMLElement {
    constructor() {
      super()
      const shadow = this.attachShadow( { mode: 'closed' } )
      const templateElem = document.getElementById(id)
      const content = templateElem.content.cloneNode(true)
      shadow.appendChild(content)
    }
  }

  window.customElements.define(component.tag, Component)

  document.body.removeChild(xTemplate)
  document.body.appendChild(template)
  document.body.appendChild(component.el)
  document.body.removeChild(template)

}

render('demo')