Clarification on use of "."

[GHNewbiee]

Hi,

@ 1-basic/07-set-attributes.js you write:

  return html`
      <!--
        LitElement sets javascript properties by default. To set html attributes, prefix the the attribute
        with a '.'. It depends on the element you're rendering whether attributes or properties should be used.
        In this case the <a> element has a href attribute which we want to set.
        See set-properties example on how to set properties.
      -->
      <a .href="${this.href}">
        ${this.label}
      </a>

But
@ https://lit-element.polymer-project.org/guide/templates

Bind to an attribute
Bind prop2 to an attribute:

it mentions that

html`<div id="${this.prop2}"></div>`

id is a global attribute as well as href is an attribute of <a> element, isn't it?

On the other hand, a little bit further it mentions:

Bind to a property
Bind prop4 to a property:

html`<input type="checkbox" .value="${this.prop4}"/>`

but value is also an input attribute! Isn't it?

In addition,
@ 1-basic/06-set-properties.js you write:

...
          <input placeholder="${this.placeholder}">
...

     <x-custom-input
        helpText="${this.helpText}"
        placeholder="${this.placeholder}">
     </x-custom-input>
...

Although placeholder is an attribute you do not write .placeholder.

Moreover, shouldn't be:

     <x-custom-input
        .helpText="${this.helpText}"
        .placeholder="${this.placeholder}">
     </x-custom-input>

since both helpText and placeholder are properties of <x-custom-input> element.

Tia

[LarsDenBakker]

Thanks for your interest. This repo is out of date with the latest developments. Please see the linked examples in the readme for an up to date version :)