Getting Started

Install pacem via npm

> npm i pacem

Reference scripts

<!-- scripts -->
<script src="/node_modules/pacem/dist/js/pacem-foundation.min.js"></script>
<script src="/node_modules/pacem/dist/js/pacem-core.min.js"></script>
<script src="/node_modules/pacem/dist/js/pacem-ui.min.js"></script>
<script src="/node_modules/pacem/dist/js/pacem-scaffolding.min.js"></script>

<!-- styles -->
<style src="/node_modules/pacem/dist/css/pacem-light.min.css"></style >

Start creating...

CustomElements

Pacem JS provides a collection of already defined webcomponents, nevertheless it allows you, the developer, to build your own.
Create your class and add a @CustomElement decoration:

@CustomElement({ tagName: 'my-custom' })
export class MyCustomElement extends HTMLElement{
}

You can take advantage of some basic functionalities by extending classes other than HTMLElement directly:

• PacemEventTarget: this class provides core event emitting capabilities (triggers the on-<event> declarative handlers) alongside with disabled state management. It is generally meant to be extended by non-UI elements.
• PacemElement: it extends PacemEventTarget and adds UI capabilities like css, css-class, tooltip, behaviors and others...

Lifecycle

The connectedCallback() method gets called and the isConnected flag is set to true.
Bindings do not get processed yet: a preliminary check is done about the overall DOM state ("completely loaded or not?").

The first propertychange event might be fired due to (either):

• declaratively assigned attribute on the DOM element,
• non-null default value assigned to the watched property.

The propertyChangedCallback() method gets hit with a true value for the 'firstChange' parameter (the 4th parameter in the method signature).
You cannot assume to safely access the sub-DOM of the web component when managing this change.

The custom (Pacem JS-specific) viewActivatedCallback() method gets called and the (also custom) isReady flag is set to true.
Bindings do get processed: the overall DOM state is ready and the template of the component has been applied.

The element fires the load event.

"Property change" generally occurs many times during the lifespan of the webcomponent.
The propertyChangedCallback() method gets hit with a false value for the 'firstChange' parameter (the 4th parameter in the method signature).
You can assume to safely access the sub-DOM of the web component when managing this change.

When the element is removed from the DOM, the disconnectedCallback() method gets called and both the isConnected and isReady flags are set to false.

This is the ideal hook for listeners and resources disposure.

The element fires the unload event.