Incorrect/misleading example use-case for ifDefined directive

[didnotwant]

Hi! In the docs for the ifDefined directive, we read the following:

This is especially useful for setting URL attributes, when the attribute should not be set if required parts of the URL are not defined, to prevent 404's.

and there's the following code example:

@customElement('my-element')
class MyElement extends LitElement {

  @property()
  filename: string | undefined = undefined;

  @property()
  size: string | undefined = undefined;

  render() {
    // src attribute not rendered if either size or filename are undefined
    return html`<img src="/images/${ifDefined(this.size)}/${ifDefined(this.filename)}">`;
  }
}

The example clearly shows how it works, however the src is a mandatory attribute of the img element, and in such a case, I think the better way of doing things would be to not render the img at all.

Please don't get me wrong – I'm of course aware that this is just an example, but if such a code snippet is presented in a documentation of a library, it could be considered by many people as a good/common practice.

I wasn't able to find out a good alternative to that in a reasonable timespan, so I'm just leaving this issue as a note or a small issue report.

[e111077]

shooting from the hip here, is tabindex a good isue case here? Trying to think if there's a better way to do this without ifDefined():

tabindex=${ifDefined(this.focusable ? '0' : undefined}