feat(customElement): support attachInternals method

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index ef5051f42f7567fe63973c13b62fbf0eeb132b3b..b1b740d712ef1cfce94bffc072197631dee6b245 100644 (file)
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1386,4 +1386,18 @@ describe('defineCustomElement', () => {
     await nextTick()
     expect(e.shadowRoot!.innerHTML).toBe(`false,boolean`)
   })
+
+  test('support attachInternals method', () => {
+    const E = defineCustomElement({
+      formAssociated: true,
+      render() {
+        return h('div', 'hello')
+      },
+    })
+    customElements.define('my-el-attach-internals', E)
+    container.innerHTML = `<my-el-attach-internals></my-el-attach-internals>`
+    const e = container.childNodes[0] as VueElement
+    expect(e.shadowRoot!.innerHTML).toBe(`<div>hello</div>`)
+    expect(e._internals).toBeTruthy()
+  })
 })

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 6ddaf89713016db4582689ec2c2dec0cd349b21e..bbabda955f5d716f3eceb9cad7604dd251f96037 100644 (file)
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -176,6 +176,8 @@ export function defineCustomElement(
   if (isPlainObject(Comp)) extend(Comp, extraOptions)
   class VueCustomElement extends VueElement {
     static def = Comp
+    static formAssociated = !!options.formAssociated
+
     constructor(initialProps?: Record<string, any>) {
       super(Comp, initialProps, _createApp)
     }
@@ -204,6 +206,7 @@ export class VueElement
   implements ComponentCustomElementInterface
 {
   _isVueCE = true
+  _internals: ElementInternals | null = null
   /**
    * @internal
    */
@@ -253,6 +256,9 @@ export class VueElement
     private _createApp: CreateAppFunction<Element> = createApp,
   ) {
     super()
+
+    if (this.attachInternals) this._internals = this.attachInternals()
+
     if (this.shadowRoot && _createApp !== createApp) {
       this._root = this.shadowRoot
     } else {