The Lightning Dart principles for components:


element


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


/// Popover element
final DivElement element = new DivElement()
  ..classes.add(C_DIALOG)
  ..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".



idPrefix


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)