string | The tag name of the custom element. |
| config | Object | The custom element configuration. |
| [config.setInitialState] | function | Function that returns the initial state for a component. |
| [config.properties] | Object | The properties used by a custom element. |
| config.properties.name | Object | The name of the property. |
| [config.properties.name.default] | \* | The default value of the property. |
| [config.properties.name.computed] | function | A function that computes the property value. |
| config.properties.name.computed.state | Object | The custom element state. |
| [config.properties.name.onChange] | function | A function that will be called with the new property value, the previous value, and the `dispatch` function. |
| [config.properties.name.reflect] | boolean | Reflect property change to corresponding attribute. |
| [config.properties.name.unstableParse] | boolean | Parse attribute values when corresponding properties are set. |
| [config.properties.name.readOnly] | boolean | Property cannot be externally set. |
| [config.actions] | Object | The actions the custom element dispatches. |
| config.actions.type | Object | The action type, name. |
| [config.actions.private] | boolean | Indicates if the action is visible outside of the custom element. |
| [config.actions.handlers] | Array | Effect handlers to run when the action type is dispatched. |
| config.renderer | Object | The renderer to be used by the custom element. |
| config.renderer.type | function | The library that renders the view. |
| config.renderer.view | function | A function that is executed by onStateChange. |
| [config.renderer.transformState] | function | A function that executes before a component's state is passed to the handler. |
| [config.onDisconnect] | function | A function that executes when the custom element is disconnected. |
| [config.onConnect] | function | A function that executes when the custom element is connected. |
| [config.behaviors] | Array | Behaviors to applied to the custom element. |
**Example**
```js
import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
createCustomElement('sn-hello-world', {
properties: {
name: {
default: 'Fred'
}
},
renderer: {
type: snabbdom,
transformState({properties}) {
return properties;
},
view: ({name}) => {
return Hello {name}!
; } } }); ``` ## Action Routing Actions will "bubble" up the component hierarchy unless they are explictly stopped by `dispatch` meta data, `{stopPropagtion: true}`, or part of the `stopPropagtion` configuration for a component definition. ```javascript dispatch('SOMETHING_HAPPENED', {somethingHappened: true}, {stopPropagtion: true}); ``` _OR_ ```javascript createCustomElement('sn-foo', () => null, { stopPropagtion: ['SOMETHING_HAPPENED'] }); ``` --- _Source: https://npm.io/package/@servicenow/ui-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._