Litelement Dot With Html Elements Attribute/property

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

Solution 1:

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

html`<inputid="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