Create Interface
Create custom elements for declarative and functional programming
declarative method that creates a custom-element without using the class syntax.
createInterface is a
createInterface is preferred for declarative and functional programming paradigm styles. createInterface inherits in the mannerism of
Object.assign
. It will create a new custom element from a base element whilst inheriting the base element's callback functions.
There are two way to use createInterface.
Install
npm install create-interface
or yarn add create-interface
Create an Autonomous/ Built-in Custom Element from an HTML Interface
; const newCustomElement = ; customElements;
Extend a Custom Element from a Custom Element
... const anotherCustomElement = ; customElements;
Lifecycle Callbacks
The lifecycle callbacks are smilar to native customElement callbacks but with some slight differences:
### adopted(element)
adopted is the equivalence of adoptedCallback but without context. Instead it provides the active element as an argument.
### attributeChanged(element)
attributeChanged is the equivalence of attributeChangedCallback but without context. It provides the following argumetnts respectively:
- element
- name
- oldValue
- newValue
### disconnected(element)
disconnected is the equivalence of disconnectedCallback but without context. Instead it provides the active element as an argument.
### connected(element)
connected is the equivalence of connectedCallback but without context. Instead it provides the active element as an argument.
### observedAttributes(element)
observedAttributes is the equivalence of static get observedAttributes() but without context. It expects an array of attribute names as a return value.
### Browser Support
This method does not provide polyfills. It is intended to support enviroments that support Custom Elements (V1). Check for native support here:
MIT 2019 Julien Etienne