@servicenow/ui-core

createCustomElement

Define a custom element.

| Param | Type | Description | | --- | --- | --- | | elementName | string | The tag name of the custom element. | | config | Object | The custom element configuration. | | [config.initialState] | Object | 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

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 <p>Hello {name}!</p>; }
  }
});

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.

dispatch('SOMETHING_HAPPENED', {somethingHappened: true}, {stopPropagtion: true});

OR

createCustomElement('sn-foo', () => null, {
  stopPropagtion: ['SOMETHING_HAPPENED']
});