usage of dottet attributes


html`<button .disabled=${true || false} />`;


that's the same way you'd do via JavaScript: button.disabled = value

that's it, dotted attributes are set right away *and* these could contain any value, as long as the Custom Element or native element accepts such value.


customElements.define('some-el', class extends HTMLElement {
 set magic(value) {
   if (value !== this._magic) {
     this._magic = value;
     this.doMagic();
   }
 }
 get magic() {
   return this._magic;
 }
});

html`<some-el .magic=${[1, 2, 3]} />`;



If you'd pass magic, without the dotte prefix, it'll set `[1, 2, 3]` as attribute, which is not what you want in this case.

What you do want, is to be able to pass any kind of variable, not just stuff that will be converted as string attribute, and to do that, you need to prefix the accessor via a dot.

I hope this explains.