바닐라 웹 구성요소 인라인 클릭 핸들러

바닐라 웹 구성요소 내부에 인라인 클릭 핸들러를 설정할 때 아래의 this는 h1 요소를 참조합니다.

export default class wc_parent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
  }

  render() {
    const template = document.createElement('template')
    template.innerHTML = `
      <h1 onclick="this.handle_click(event)">hello</h1>
      <style>
        :host {
          display: block;
        }
      </style>
    `

    this.shadowRoot.appendChild(
      template.content.cloneNode(true)
    )
  }

  handle_click(e) {
    console.log(e)
  }

  connectedCallback() {
    this.render()
  }
}

인라인 클릭을 처리하려면 connectedCallback() 내부에서 다음과 같이 작동하도록 해야 합니다.

connectedCallback() {
  this.shadowRoot.addEventListener('click', this.handle_click)
}

React와 같이 this 객체 대신 onclick="this.handle_click(event)" 내부의 window가 구성 요소를 가리키도록 할 수 있다면 삶이 조금 더 쉬워질 것입니다. 창에 속성을 추가하고 이 구성 요소window[this.localName] = this를 가리킨 다음 this를 window[this.localName] 내부render() 메서드로 바꿉니다.

export default class wc_parent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    window[this.localName] = this 
  }

  render() {
    const template = document.createElement('template')
    template.innerHTML = `
      <h1 onclick="this.handle_click(event)">hello</h1>
      <style>
        :host {
          display: block;
        }
      </style>
    `
    // replace this to window['wc-parent']
    template.innerHTML = template.innerHTML.replace(
      /this/g, 
      `window['${this.localName}']`
    )

    this.shadowRoot.appendChild(
      template.content.cloneNode(true)
    )
  }

  handle_click(e) {
    console.log(e)
  }

  connectedCallback() {
    this.render()
  }
}

이제 HTML 요소를 검사하면 프런트 엔드에 표시되는 방식입니다. 이 부분onclick="window['wc-parent'].handle_click(event)"은 wc-parent 구성 요소 내에서 이 메서드를 찾을 수 있음을 명확하게 나타내므로 나에게 의미가 있습니다.

<wc-parent>
  #shadow-root (open)
    <h1 onclick="window['wc-parent'].handle_click(event)">hello</h1>
</wc-parent>