A boolean prop follows the HTML convention in both directions:
presence means true, absence means
false. Reflecting true sets the bare
attribute; reflecting false removes it. Nothing ever gets
stamped as flag="false".
Every button below reports the resulting prop value and the actual
attribute. The border lights up via
:host([flag]) — a presence selector that now matches only
when the prop is genuinely true.
All three of these mount with props.flag === true. The last
one is the surprise worth internalizing: any present value counts,
including the literal string "false", exactly like
<input disabled="false"> is still disabled.
No attribute, no [flag] match, and
props.flag === false. Removing the attribute later also
lands on false rather than restoring a declared default —
which is why boolean props should default to false and use
an inverted name (disabled, not enabled) when
you want them on by default.