μ΄ μμ λ 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 λ΄μ μμλ€λ§ λ³Ό μ μλ€λ μ μ μ μν΄μΌ ν©λλ€. μΉ μ»΄ν¬λνΈ μΈλΆμ μμμ μ κ·Όν΄μΌ ν κ²½μ°, λ€μ μ΅μ
μ€ νλλ₯Ό μ¬μ©ν μ μμ΅λλ€:
host
: νμ¬ shadow DOMμ νΈμ€ν
νλ μμλ₯Ό μ νν©λλ€.global
: μ λμ¬λ‘ μ¬μ©νλ©΄ νμ¬ shadow DOM λμ λ©μΈ λ¬Έμμμ μ νν©λλ€.λμΌν μμΉμ΄ shadow DOMμ μ¬μ©νμ§ μλ μΉ μ»΄ν¬λνΈμλ μ μ©λ©λλ€.
shadow DOMμ²λΌ μ
λ ν°κ° μΊ‘μνλμ§λ μμ§λ§, μ¬μ ν htmx.process
λ₯Ό νΈμΆνμ¬ HTMXμκ² μ»΄ν¬λνΈμ μ½ν
μΈ λ₯Ό μλ €μ€μΌ ν©λλ€.