Web コンポーネント

この例は HTMX を Web コンポーネントと統合し、シャドウ DOM 内で使用する方法を示しています。

既定では、HTMX は Web コンポーネントについての情報を何も持たず、シャドウ DOM 内の何も認識しません。このため、htmx.process を使用して、コンポーネントのシャドウ DOM について手動で HTMX に伝える必要があります。

customElements.define('my-component', class MyComponent extends HTMLElement {
  // This method runs when your custom element is added to the page
  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) // Tell HTMX about this component's shadow DOM
  }
})

コンポーネントのシャドウ DOM について HTMX に伝えると、ほとんどのことは期待通りに動作します。ただし、hx-target 内の selector は、同じシャドウ DOM 内の要素のみを認識することに注意してください。Web コンポーネントの外部にアクセスする必要がある場合は、次のいずれかのオプションを使用できます。

• host: 現在のシャドウ DOM をホストする要素を選択します。
• global: プレフィックスとして使用した場合、現在のシャドウ DOM ではなくメインドキュメントから選択します。

これらの原則は一般的に、シャドウ DOM を使用しない Web コンポーネントにも適用されます。セレクタはシャドウ DOM のようにカプセル化されませんが、htmx.process を呼び出して、依然として HTMX にコンポーネントのコンテンツをポイントする必要があります。

🔗デモ