Hooks allow functionality to be inserted at a global level, across all controller instances. This provides a mechanism to extend or modify the behavior of components without altering their source code.
To use a hook, you define a function that gets called and attach
it using hookOnGlobal(). This callback's arguments
depend on the hook type, and is documented below. It's
considered a global hook, which means it is attached to all
event targets.
When any component is defined, a hook fires. This allows modification of the class as necessary. The hook is passed a reference to the custom element, not the controller.
component arguments:
customElement: The custom element class being
defined.
customElementConfig: The configuration object
passed to the component() function.
Using this hook you can modify the component class so it will perform an action every time it is added to the DOM.
Components can bind to controller properties and detect when those values change. Often they are updated when the component listens to attributes and properties, but the values could also change within the controller class.
When any bound property is changed, the
set:PROP_NAME
hook is fired. This indicates the property was set or updated.
Also, this fires for scope property changes.
set:PROP_NAME arguments:
controller: The controller instance affected.
controllerOrScope: The scope or the controller
instance whose bound property was changed. (Omitted when
called via update().)
newValue: The new value of the bound property.
(Omitted when called via update().)
oldValue: The old value of the bound property.
(Omitted when called via update().)
Similar to the named hook described above, all bound properties
will also listen for `set:` (unnamed) hook invocations. Calling
update() will trigger
the `set:` hooks, either for one controller or all controllers.
set:PROP_NAME arguments:
controller: The controller instance that
changed a bound property.