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">点击我!</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来指向组件的内容。

🔗演示