loading... Pacem JS

Getting Started

Install pacem via npm

> npm i pacem

Reference scripts


<!-- polyfills and fixings (Microsoft Edge) -->
<script src="https://github.com/webcomponents/custom-elements/blob/master/custom-elements.min.js"></script>
<script src="/node_modules/pacem/dist/js/polyfills/documentfragment.edge.js"></script>

<!-- scripts -->
<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:

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):

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.

"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 the isConnected flag is set to false.

This is the ideal hook for listeners and resources disposure.