fix(compiler-dom): bail static stringfication on non-attr bindings

fix #1128

packages/shared/src/domAttrConfig.ts

@@ -1,18 +1,22 @@
 import { makeMap } from './makeMap'
 
-// On the client we only need to offer special cases for boolean attributes that
-// have different names from their corresponding dom properties:
-// - itemscope -> N/A
-// - allowfullscreen -> allowFullscreen
-// - formnovalidate -> formNoValidate
-// - ismap -> isMap
-// - nomodule -> noModule
-// - novalidate -> noValidate
-// - readonly -> readOnly
+/**
+ * On the client we only need to offer special cases for boolean attributes that
+ * have different names from their corresponding dom properties:
+ * - itemscope -> N/A
+ * - allowfullscreen -> allowFullscreen
+ * - formnovalidate -> formNoValidate
+ * - ismap -> isMap
+ * - nomodule -> noModule
+ * - novalidate -> noValidate
+ * - readonly -> readOnly
+ */
 const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`
 export const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs)
 
-// The full list is needed during SSR to produce the correct initial markup.
+/**
+ * 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,` +
@@ -41,7 +45,9 @@ export const propsToAttrMap: Record<string, string | undefined> = {
   httpEquiv: 'http-equiv'
 }
 
-// CSS properties that accept plain numbers
+/**
+ * CSS properties that accept plain numbers
+ */
 export const isNoUnitNumericStyleProp = /*#__PURE__*/ makeMap(
   `animation-iteration-count,border-image-outset,border-image-slice,` +
     `border-image-width,box-flex,box-flex-group,box-ordinal-group,column-count,` +
@@ -53,3 +59,27 @@ export const isNoUnitNumericStyleProp = /*#__PURE__*/ makeMap(
     `fill-opacity,flood-opacity,stop-opacity,stroke-dasharray,stroke-dashoffset,` +
     `stroke-miterlimit,stroke-opacity,stroke-width`
 )
+
+/**
+ * Known attributes, this is used for stringification of runtime static nodes
+ * so that we don't stringify bindings that cannot be set from HTML.
+ * Don't also forget to allow `data-*` and `aria-*`!
+ * Generated from https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+ */
+export const isKnownAttr = /*#__PURE__*/ makeMap(
+  `accept,accept-charset,accesskey,action,align,allow,alt,async,` +
+    `autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,` +
+    `border,buffered,capture,challenge,charset,checked,cite,class,code,` +
+    `codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,` +
+    `coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,` +
+    `disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,` +
+    `formaction,formenctype,formmethod,formnovalidate,formtarget,headers,` +
+    `height,hidden,high,href,hreflang,http-equiv,icon,id,importance,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,` +
+    `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,` +
+    `value,width,wrap`
+)