6

I am learning web components using Polymer. I am a beginner in web development.

How can I understand what does dot notation means in .checked attributes or property of HTML element?

<input id="state" type="radio" name=${this.group} .checked=${this.checked} />
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
user2914606
  • 61
  • 1
  • 2

1 Answers1

12

Overall the binding type consists of these character prefixes: .prop, ?optional and @event.

html`<input 
    id="state" 
    type="radio" 
    name=${this.group} 
    @change=${onChange}
    ?required=${required}
    .checked=${this.checked} />`

You can insert JavaScript expressions as placeholders for HTML text content, attributes, Boolean attributes, properties, and event handlers.

  • Text content: <p>${...}</p>
  • Attribute: <p id="${...}"></p>
  • Boolean attribute: ?disabled="${...}"
  • Property: .value="${...}"
  • Event handler: @event="${...}"

lit-element documentation

Live Demo

m3o
  • 3,881
  • 3
  • 35
  • 56
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
  • 1
    Thank you very much. Nicely explained with example. I understood it well. – user2914606 Apr 29 '20 at 19:36
  • 2
    While you use double quotes around properties and others in the explanation, you don't use it in the example. Any reason? (Actually, the documentation includes double quotes) – jjmerelo Jul 02 '21 at 06:49