Attributes and Properties

The main way to get information passed into a custom element is to use DOM element attributes and instance properties. Attributes are the string values added via the HTML. Properties are values set through JavaScript on the HTMLElement instance. Your controller will operate independently of the element, so Fudgel offers an easy way to bind to these input sources.

To illustrate this difference, consider the following HTML. This custom element will have the "heading" attribute set to "Table of Contents". Attributes are restricted to just strings. A nice feature of attributes is that when the controller class's property is updated, the HTMLElement's attribute is also automatically updated (as long as you aren't also using this as a property). This conditional two-way binding is automatic.

There are no properties defined through HTML, but let's run a bit of JavaScript to get the object and assign a value. Properties can hold any type of value, including objects and dates.

In order to bind your custom element to an attribute or property and have the controller's property change automatically, you will need to set it up in the custom element's config.

With this set up, you are now able to respond to changes in the properties and attributes of the HTMLElement when any outside actor changes them, such as with jQuery's $element.attr() or Angular's [propName]="value" mechanisms. These are just two examples and this functionality works with your favorite frameworks equally well.

A single custom element can bind to the same name as both an attribute and a property. Fudgel will initially get the attribute value, then override it with the property value. Any change through an attribute or a property will result in the controller's property being updated. Updates to the controller's property will update the attribute (as appropriate).