Web 组件

此示例展示了如何将 HTMX 与 Web 组件集成，以便可以在影子 DOM 中使用。

默认情况下，HTMX 对你的网络组件一无所知，也不会看到其影子 DOM 中的任何内容。因此，你需要使用 htmx.process 手动告知 HTMX 你组件的影子 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 你的组件的影子 DOM，大多数事情都应该按预期工作。但是，请注意，像 hx-target 中的选择器只会看到同一个影子 DOM 中的元素。如果你需要访问 Web 组件之外的东西，你可以使用以下选项之一：

  • host：选择托管当前影子 DOM 的元素
  • global：如果用作前缀，则从主文档中选择，而不是从当前影子 DOM 中选择

同样的原则通常适用于不使用影子 DOM 的 Web 组件；虽然选择器不会像影子 DOM 那样被封装，但你仍然必须通过 htmx.process 调用将 HTMX 指向你的组件的内容。

Server Requests ↑ Show

演示