Dynamic properties

A dynamic property represents a state of a component that can affect its visual appearance, and/or behavior.

A dynamic property represents a state of a component that can affect its visual appearance, and/or behavior.

Each dynamic property consists of:

• The default state that determines:

  • The state to which styles associated directly with the element, i.e. not with a pseudo-class of that element, belong. For example, the default state for the enabled property is enabled which means that associating styles with the element is the same as associating them with the :enabled pseudo-class. In other words, the following two rules are equivalent:

    div {color: red}
    div:enabled {color: red}

  • The initial state, i.e. the state of the component when the page is initially loaded. This can be overridden by the page author using the corresponding initial state attribute.

• Pseudo-classes. There is one pseudo-class for each state of a property.

• An observable property. Changes to the value of an observable property will typically result in a change in the appearance of a component but may also have other effects as well.

• An attribute to set the initial state of the dynamic property when the page is loaded. The attribute is processed on the server so that the component has the correct visual appearance as soon as the page is loaded, before any JavaScript has been run.

In order for a component to have a dynamic property, the component must have style rules associated with one or more of the pseudo-classes that correspond to the dynamic property.

The following table lists the available dynamic properties.