The Lightning Dart principles for components:


Every UI component has a top level element (extending HtmlElement), e.g.

/// Popover element
final DivElement element = new DivElement()
  ..attributes[Html0.ROLE] = Html0.ROLE_DIALOG;


i.e. the element is the actual HtmlElement node, the component class is the functionality wrapper.

Many components allow you to provide the element, e.g. a Form can be based on the usual FormElement or a DivElement.  This is usually available for the base constructor where convenience constructors create the element.

C_ css class constants

The css class names are defined in the component via static constants, e.g.


static const String C_DIALOG = "slds-dialog";


This prevents typos and allows easily to search for "where used".


Most UI components have an optional idPrefix. For components, which have a name (input elements, ...), the actual id is "${idPrefix-${name}".

In many cases, the id prefix is generated if not provided.  A manual idPrefix certainly helps with automated testing, but you need to ensure it is unique.  The id prefix is "handed down" to contained elements - e.g. from table to row to cell - or form to input elements.

add(component) -or- append(element)

All components allow you to add other components or append html elements:


/// add other component
void add(LComponent component);

/// append other html element
void append(Element element);


If the component has a structure, it adds/appends the items to the main target - e.g. in a modal dialog to the dialog body (not the dalig itself)