chore: add useHostInternals

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index b1b740d712ef1cfce94bffc072197631dee6b245..cdfcd602152e30baeb2599613c421f74cc522411 100644 (file)
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -17,6 +17,7 @@ import {
   render,
   renderSlot,
   useHost,
+  useHostInternals,
   useShadowRoot,
 } from '../src'
 
@@ -1132,6 +1133,21 @@ describe('defineCustomElement', () => {
       const style = el.shadowRoot?.querySelector('style')!
       expect(style.textContent).toBe(`div { color: red; }`)
     })
+
+    // wait for jsdom to fix https://github.com/jsdom/jsdom/issues/3732
+    test.todo('useHostInternals', async () => {
+      const Foo = defineCustomElement({
+        setup() {
+          const internals = useHostInternals()!
+          internals.ariaLive = 'polite'
+          return () => h('div', 'hello')
+        },
+      })
+      customElements.define('my-el-use-host-internals', Foo)
+      container.innerHTML = `<my-el-use-host-internals>`
+      const el = container.childNodes[0] as VueElement
+      expect(el._internals?.ariaLive).toBe('polite')
+    })
   })
 
   describe('expose', () => {

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index bbabda955f5d716f3eceb9cad7604dd251f96037..24242573058003e39ccea8555f85374fe0392579 100644 (file)
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -713,3 +713,12 @@ export function useShadowRoot(): ShadowRoot | null {
   const el = __DEV__ ? useHost('useShadowRoot') : useHost()
   return el && el.shadowRoot
 }
+
+/**
+ * Retrieve the ElementInternals of the current custom element. Only usable in setup()
+ * of a `defineCustomElement` component.
+ */
+export function useHostInternals(): ElementInternals | null {
+  const el = __DEV__ ? useHost('useHostInternals') : useHost()
+  return el && el._internals
+}

diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ca9a307dd98086e0fd6c1bffb4801e94799bd1f5..b388eac11ec80477cd62ff3256d98dd94d043cdb 100644 (file)
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -256,6 +256,7 @@ export {
   defineSSRCustomElement,
   useShadowRoot,
   useHost,
+  useHostInternals,
   VueElement,
   type VueElementConstructor,
   type CustomElementOptions,