feat(runtime-dom): add popover api attributes

packages/compiler-core/__tests__/transforms/vOn.spec.ts

@@ -733,5 +733,18 @@ describe('compiler: transform v-on', () => {
         },
       })
     })
+    it('Popover api @beforetoggle', () => {
+      const { node } = parseWithVOn(`<div @beforetoggle="test"></div>`, {
+        prefixIdentifiers: true,
+      })
+      const vnodeCall = node.codegenNode as VNodeCall
+      const properties = (vnodeCall.props as ObjectExpression).properties[0]
+        .value
+      expect(properties).toMatchObject({
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: '_ctx.test',
+        isStatic: false,
+      })
+    })
   })
 })

packages/runtime-dom/src/jsx.ts

@@ -323,6 +323,11 @@ export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
    * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
    */
   is?: string
+
+  // Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+  popover?: true | 'auto' | 'manual'
+  onBeforetoggle?: Event
+  onToggle?: Event
 }
 
 type HTMLAttributeReferrerPolicy =
@@ -372,7 +377,7 @@ export interface BlockquoteHTMLAttributes extends HTMLAttributes {
   cite?: string
 }
 
-export interface ButtonHTMLAttributes extends HTMLAttributes {
+export interface ButtonHTMLAttributes extends PopoverHTMLAttributes {
   autofocus?: Booleanish
   disabled?: Booleanish
   form?: string
@@ -404,6 +409,12 @@ export interface DataHTMLAttributes extends HTMLAttributes {
   value?: string | ReadonlyArray<string> | number
 }
 
+/* Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API */
+export interface PopoverHTMLAttributes extends HTMLAttributes {
+  popovertarget?: string
+  popovertargetaction?: 'hide' | 'show' | 'toggle'
+}
+
 export interface DetailsHTMLAttributes extends HTMLAttributes {
   open?: Booleanish
   onToggle?: Event
@@ -512,7 +523,7 @@ export type InputTypeHTMLAttribute =
   | 'week'
   | (string & {})
 
-export interface InputHTMLAttributes extends HTMLAttributes {
+export interface InputHTMLAttributes extends PopoverHTMLAttributes {
   accept?: string
   alt?: string
   autocomplete?: string

packages/shared/src/domAttrConfig.ts

@@ -10,17 +10,21 @@ import { makeMap } from './makeMap'
  * - nomodule -> noModule
  * - novalidate -> noValidate
  * - readonly -> readOnly
+ * - popovertarget -> popoverTargetElement (TODO: how to map this?)
+ * - popovertargetaction -> popoverTargetAction
  */
 const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`
-export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs)
+export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(
+  `${specialBooleanAttrs},popovertarget,popovertargetaction`,
+)
 
 /**
  * The full list is needed during SSR to produce the correct initial markup.
  */
 export const isBooleanAttr = /*#__PURE__*/ makeMap(
   specialBooleanAttrs +
     `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,` +
-    `inert,loop,open,required,reversed,scoped,seamless,` +
+    `inert,loop,open,popover,required,reversed,scoped,seamless,` +
     `checked,muted,multiple,selected`,
 )
 
@@ -70,7 +74,8 @@ export const isKnownHtmlAttr = /*#__PURE__*/ makeMap(
     `height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,` +
     `ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,` +
     `manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,` +
-    `open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,` +
+    `open,optimum,pattern,ping,placeholder,popover,popovertarget,popovertargetaction,` +
+    `poster,preload,radiogroup,readonly,` +
     `referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,` +
     `selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,` +
     `start,step,style,summary,tabindex,target,title,translate,type,usemap,` +