DOM property

As explained in Web Components in Action

A JavaScript-accessible value associated with a DOM element object.

A DOM property is a JavaScript-accessible value associated with an element object. Read a video element’s duration, or set currentTime to jump to a point in playback. section 1.3

Properties belong to an element’s public API alongside methods, attributes, and events. Custom Web Components expose the same kinds of APIs, although their properties and HTML attributes do not always match. Reflection is a widely accepted option for keeping corresponding properties and attributes synchronized. section 1.3

Figure 1.6. DOM elements have various properties, methods, events, and attributes that are used to tell the element how to act and communicate with the outside world.

Use the element API diagram to compare properties with methods, events, and attributes. section 1.3

How Web Components in Action covers it

How deep it goes

Explains reading and setting properties, contrasts attributes, and introduces reflection without detailing implementation mechanics.

Examples

Uses video duration and currentTime as concrete property examples, alongside custom Web Component APIs.

What it assumes

Assumes familiarity with JavaScript objects and HTML elements while reinforcing the distinction between properties and attributes.

What you can do after

Apply properties to inspect or control DOM elements and design public APIs for custom Web Components.

How it connects

Connects DOM properties with methods, attributes, events, Web Components, and attribute reflection.

liveBookmanning.com

Read Web Components in Action on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.