Web 组件

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

默认情况下，HTMX 对您的 Web 组件一无所知，也不会看到其 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 组件之外的内容，可以使用以下选项之一

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

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

🔗演示