Web Components

이 μ˜ˆμ œλŠ” HTMXλ₯Ό μ›Ή μ»΄ν¬λ„ŒνŠΈμ™€ ν†΅ν•©ν•˜μ—¬ shadow DOM λ‚΄μ—μ„œ μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€.

기본적으둜 HTMXλŠ” μ›Ή μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄ 아무것도 μ•Œμ§€ λͺ»ν•˜λ©°, shadow DOM λ‚΄λΆ€λ₯Ό μΈμ‹ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ HTMXμ—κ²Œ μ»΄ν¬λ„ŒνŠΈμ˜ shadow DOM에 λŒ€ν•΄ μˆ˜λ™μœΌλ‘œ μ•Œλ €μ€˜μ•Ό ν•©λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ htmx.processλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

customElements.define('my-component', class MyComponent extends HTMLElement {
  // 이 λ©”μ„œλ“œλŠ” μ»€μŠ€ν…€ μ—˜λ¦¬λ¨ΌνŠΈκ°€ νŽ˜μ΄μ§€μ— 좔가될 λ•Œ μ‹€ν–‰λ©λ‹ˆλ‹€.
  connectedCallback() {
    const root = this.attachShadow({ mode: 'closed' })
    root.innerHTML = `
      <button hx-get="/my-component-clicked" hx-target="next div">Click me!</button>
      <div></div>
    `
    htmx.process(root) // HTMXμ—κ²Œ 이 μ»΄ν¬λ„ŒνŠΈμ˜ shadow DOM에 λŒ€ν•΄ μ•Œλ¦½λ‹ˆλ‹€.
  }
})

ν•œλ²ˆ HTMXμ—κ²Œ μ»΄ν¬λ„ŒνŠΈμ˜ shadow DOM을 μ•Œλ¦¬λ©΄, λŒ€λΆ€λΆ„μ˜ κΈ°λŠ₯이 μ˜ˆμƒλŒ€λ‘œ λ™μž‘ν•  κ²ƒμž…λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ hx-targetκ³Ό 같은 μ…€λ ‰ν„°λŠ” 같은 shadow DOM λ‚΄μ˜ μš”μ†Œλ“€λ§Œ λ³Ό 수 μžˆλ‹€λŠ” 점에 μœ μ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€. μ›Ή μ»΄ν¬λ„ŒνŠΈ μ™ΈλΆ€μ˜ μš”μ†Œμ— μ ‘κ·Όν•΄μ•Ό ν•  경우, λ‹€μŒ μ˜΅μ…˜ 쀑 ν•˜λ‚˜λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€:

λ™μΌν•œ 원칙이 shadow DOM을 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” μ›Ή μ»΄ν¬λ„ŒνŠΈμ—λ„ μ μš©λ©λ‹ˆλ‹€. shadow DOM처럼 μ…€λ ‰ν„°κ°€ μΊ‘μŠν™”λ˜μ§€λŠ” μ•Šμ§€λ§Œ, μ—¬μ „νžˆ htmx.processλ₯Ό ν˜ΈμΆœν•˜μ—¬ HTMXμ—κ²Œ μ»΄ν¬λ„ŒνŠΈμ˜ μ½˜ν…μΈ λ₯Ό μ•Œλ €μ€˜μ•Ό ν•©λ‹ˆλ‹€.

Server Requests ↑ Show

πŸ”—Demo