Web Components

這個範例展示如何將 HTMX 與 Web Components 整合，使其可以在 Shadow DOM 內部使用。

預設情況下，HTMX 對您的 Web Components 一無所知，也看不到它們 Shadow DOM 內部的任何內容。因此，您需要使用 htmx.process 手動告知 HTMX 您的元件的 Shadow DOM。

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
  }
})

一旦您告知 HTMX 您的元件的 Shadow DOM，大多數情況下應該都能如預期地運作。但是請注意，像 hx-target 中的選擇器只會看到相同 Shadow DOM 內的元素 - 如果您需要存取 Web Components 外部的內容，您可以使用以下選項之一

• host：選取託管目前 Shadow DOM 的元素
• global：如果作為前綴使用，則從主文件而不是目前的 Shadow DOM 中選擇

相同的原則通常也適用於不使用 Shadow DOM 的 Web Components；雖然選擇器不會像使用 Shadow DOM 那樣被封裝，但您仍然必須呼叫 htmx.process 來將 HTMX 指向您的元件內容。

🔗示範