Coral is the main namespace for Coral.

Coral API

The main Coral namespace.




Static Properties

Coral.keys {Coral.keys}

A key listener for global hotkeys.



Register a Coral component, setting up inheritance, mixins, properties, and the associated custom element.
Name Type Description
options Object

Component options.

Name Type Optional Default Description String No
Name of the constructor (i.e. 'Accordion.Item'). The constructor will be available under 'Coral' at the path specified by the name.
options.tagName String No
Name of the new element (i.e 'coral-component').
options.baseTagName String Yes
(none) Name of the tag to extend (i.e. 'button'). This is only required when extending an existing HTML element such that the <button is="custom-element"> style will be used.
options.extend Object Yes
Coral.Component Base class of the component. When extending an existing HTML element, this should match the interface implemented by the tag -- that is, for baseTagName: 'button' you should pass extend: HTMLButtonElement.
options.mixins Array.<(Object|Coral~mixin)> Yes
Mixin or {Array} of mixins to add. Mixins can be an {Object} or a {Coral~mixin}. Object.<String, Coral~PropertyDescriptor> Yes
A map of property names to their corresponding descriptors. Object Yes
Map of the events and their handler.
options._elements Object Yes
Map of elements and their locations used for caching.


Gets the corresponding underscore prefixed "private" property by the same name.
The prefixed property


Sets the corresponding underscore prefixed "private" property by the same name.
Name Type Description
value * The value to set

Type Definitions


A functional mixin.
Name Type Description
target Object The target prototype or instance to apply the mixin to.
options Object

Options for this mixin.

Name Type Description The properties object as passed to Coral.register. This can be modified in place.


A property descriptor.


Name Type Argument Default Description
transform function <optional>
null The value transformation function. Values passed to setters will be ran through this function first.
attributeTransform function <optional>
transform The value transformation function for attribute. The value given by attributeChangedCallback will be ran through this function first before passed to setters.
validate Coral.validate~validationFunction <optional>
Coral.validate.valueMustChange The value validation function. A validation function that takes two arguments, newValue and oldValue, returning true if the setter should run or false if not.
trigger String|function <optional>
null The name of the event to trigger after this property changes, or a {Function} to call that will trigger the event. The function is passed the newValue and oldValue.
triggerBefore String|function <optional>
null The name of the event to trigger before this property changes, a {Function} to call that will trigger the event, or true to set the name automatically. The function is passed the newValue and oldValue and must return the Event object for preventDefault() to work within handlers. If set to true, Coral~PropertyDescriptor must be a string with a colon in it, such as coral-component:change, which results in coral-component:beforechange. If set to false, no event will be triggered before the setter is ran.
attribute String <optional>
propName The name of the attribute corresponding to this property. If not provided, the property name itself will be used. If null is provided, the property will not be set by a corresponding attribute.
reflectAttribute Boolean <optional>
false Whether this property should be reflected as an attribute when changed. This is useful when you want to style CSS according to the property's existence or value.
sync function <optional>
null The method to be called when this property's value should be synced to the DOM.
alsoSync String|Array.<String> <optional>
null A property or list of properties that should be synced after this property is synced.
set function <optional>
Coral~defaultSet The setter for this property.
get function <optional>
Coral~defaultGet The getter for this property.
override Boolean <optional>
false Whether this property descriptor should completely override. If false, this descriptor will augment the existing descriptor. See Coral.register.augmentProperties for details.
contentZone Boolean <optional>
false Whether this property represents a content zone. Content zones are treated differently when set() is invoked such that the provided value is passed to the content zone's set() method.