Setting boolean, hyphenated attribute on a vue custom-element to null does not remove the attribute in the HTML document

[WIStudent]

Vue version

3.5.11

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-bayiek?file=src%2FApp.vue

Steps to reproduce

Run the StackBlitz reproduction project.

It tries multiple ways to set boolean attributes on vue custom-elements and native custom-elements:

<vue-custom-element
  :foo="booleanValue"
  :foo-bar="booleanValue"
></vue-custom-element>

<native-custom-element
  :foo="booleanValue"
  :foo-bar="booleanValue"
></native-custom-element>

<vue-custom-element
  :foo="booleanValue ? '' : null"
  :foo-bar="booleanValue ? '' : null"
></vue-custom-element>

<native-custom-element
  :foo="booleanValue ? '' : null"
  :foo-bar="booleanValue ? '' : null"
></native-custom-element>

What is expected?

 <vue-custom-element
    :foo="booleanValue ? '' : null"
    :foo-bar="booleanValue ? '' : null"
  ></vue-custom-element>

should set or remove both non-hyphenated and hyphenated attributes in the HTML document accordingly.

What is actually happening?

 <vue-custom-element
    :foo="booleanValue ? '' : null"
    :foo-bar="booleanValue ? '' : null"
  ></vue-custom-element>

updates the non-hyphenated attribute correctly, but the hyphenated attribute is always set to foo-bar="" in the HTML document, which is interpreted as true.

<vue-custom-element
  :foo="booleanValue"
  :foo-bar="booleanValue"
></vue-custom-element>

sets both attributes correctly on vue custom-elements, but

<native-custom-element
  :foo="booleanValue"
  :foo-bar="booleanValue"
></native-custom-element>

sets both attributes to either "true" or "false" in the HTML document, which is always interpreted as true by the native custom-element because the attribute is present.

This is problematic because now we need to differentiate between custom-elements created with vue and native custom elements. According to Vue's documentation, attributes that are set to null or undefined should be removed in the HTML document. So I would expect

 <vue-custom-element
    :foo="booleanValue ? '' : null"
    :foo-bar="booleanValue ? '' : null"
  ></vue-custom-element>

to create

<vue-custom-element></vue-custom-element>

in the HTML document when booleanValue is false.

System Info

No response

Any additional comments?

No response