I am learning web ponents 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} />

I am learning web ponents 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} />

• javascript
• web-ponent
• lit-element
• polymer-3.x

Share Improve this question Follow edited Nov 12, 2020 at 3:32 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Apr 28, 2020 at 21:47 user2914606user2914606 7111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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