Inconsistent behavior of id attribute in custom element v/s standard html element

[ravijayaramappa]

Description

A custom element's id attribute behaves differently compare to a standard html element when the id property is bound to a class getter that returns undefined.

This difference is because of the way compiler handles id value for the two types of component. For custom element, the compiler handles the id property as props.
For a standard element, the compiler handles the id property as attrs.

api_element("div", {
        attrs: {
          "id": api_scoped_id($cmp.identifier)
        },
        key: 0
      }, [])

api_custom_element("x-child", _xChild, {
        props: {
          "id": api_scoped_id($cmp.identifier)
        },
        key: 0
      }, [])

Steps to Reproduce

<template>
    <div id={identifier}></div>
    <x-child id={identifier}></x-child>
</template>

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    get identifier() {
        return undefined;
    }
}

   xchildElement.getAttribute('id); // 'undefined`
  divElement.getAttribute('id'); // null