attributes enumerate

[wocanbe]

Has a method to enumerate attributes(like mapAttrs)? I can't enumerate attributes use the following way

import { LitElement, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('my-input')
class MyInput extends LitElement {
  @property()
  type
  @property()
  value
  @property()
  placeholder
  @property({ type: Boolean })
  disabled
  @property({ type: Boolean })
  readonly
  @property()
  maxlength
  @property()
  minlength
  @property()
  name
  @property()
  max
  @property()
  min
  @property()
  step
  @property({ type: Boolean })
  autofocus
  // ...
  render() {
    return html`<style>/* ... */</style><div><input ${this.getNativeAttrs()} /></div>`
  }
  private getNativeAttrs() {
    const attrs = []
    attrs.push(html` class="my-input--inner"`)
    if (this.type) attrs.push(html` type=${this.type}`)
    if (this.value) attrs.push(html` value=${this.value}`)
    if (this.placeholder) attrs.push(html` placeholder=${this.placeholder}`)
    if (this.disabled) attrs.push(html` disabled=${this.disabled}`)
    if (this.readonly) attrs.push(html` readonly=${this.readonly}`)
    if (this.maxlength) attrs.push(html` maxlength=${this.maxlength}`)
    if (this.minlength) attrs.push(html` minlength=${this.minlength}`)
    if (this.name) attrs.push(html` name=${this.name}`)
    if (this.max) attrs.push(html` max=${this.max}`)
    if (this.min) attrs.push(html` min=${this.min}`)
    if (this.step) attrs.push(html` step=${this.step}`)
    if (this.autofocus) attrs.push(html` autofocus=${this.autofocus}`)
    return attrs
  }
}
export default MyInput

[wocanbe]

I wrote it like this. It doesn't work when I use it.

[wocanbe]

I solved it like this.Thank you all the same.

// ...
private renderNativeInput() {
  const input = document.createElement('input')
  input.className = 'my-input--inner'
  
  if (this.type) input.setAttribute('type', this.type)
  if (this.value) input.setAttribute('value', this.value)
  if (this.placeholder) input.setAttribute('placeholder', this.placeholder)
  if (this.disabled) input.setAttribute('disabled', this.disabled)
  if (this.readonly) input.setAttribute('readonly', this.readonly)
  if (this.maxlength) input.setAttribute('maxlength', this.maxlength)
  if (this.minlength) input.setAttribute('minlength', this.minlength)
  if (this.name) input.setAttribute('name', this.name)
  if (this.max) input.setAttribute('max', this.max)
  if (this.min) input.setAttribute('min', this.min)
  if (this.step) input.setAttribute('step', this.step)
  if (this.autofocus) input.setAttribute('autofocus', this.autofocus)
  return input
}
// ...

[justinfagnani]

Why not use a lit-html template for this?

[bicknellr]

If you're trying to add / remove the attribute based on whether or not some property is defined, you can pass nothing when you want to remove the attribute. For example, this will set the max attribute to this.max if this.max is not nullish and will remove the max attribute (not just set it to the empty string) otherwise:

html`<input max=${this.max ?? nothing}>`;

[wocanbe]

That's a good idea. I've changed it this way now.

[muratcorlu]

What is nothing here?

Normally we used to use ifDefined for this, like max="${ifDefined(this.max)}"

[tbroyer]

See https://lit.dev/docs/api/templates/#nothing (see also https://lit.dev/docs/templates/conditionals/#conditionally-rendering-nothing)

Note that ifDefined is just another syntax for this.max ?? nothing (

lit/packages/lit-html/src/directives/if-defined.ts

Line 15 in c134604

export const ifDefined = <T>(value: T) => value ?? nothing;

)

[graynorton]

Elevating this reply from @bicknellr, which is a good solution:

If you're trying to add / remove the attribute based on whether or not some property is defined, you can pass nothing when you want to remove the attribute. For example, this will set the max attribute to this.max if this.max is not nullish and will remove the max attribute (not just set it to the empty string) otherwise:

html`<input max=${this.max ?? nothing}>`;