Web 组件

此示例展示了如何将 HTMX 与 Web 组件集成，使其能够在 shadow DOM 内部使用。

默认情况下，HTMX 并不了解您的 Web 组件，也不会看到其 shadow DOM 内部的内容。因此，您需要使用 htmx.process 手动告知 HTMX 您的组件的 shadow DOM。

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 内部的元素——如果需要访问 Web 组件外部的内容，您可以使用以下选项之一：

• host：选择当前 shadow DOM 的宿主元素
• global：如果用作前缀，则从主文档而非当前 shadow DOM 中选择

对于不使用 shadow DOM 的 Web 组件，通常也适用相同的原则；虽然选择器不会像 shadow DOM 那样被封装，但您仍需通过调用 htmx.process 将 HTMX 指向您的组件内容。

🔗Demo