Create Interface

Create custom elements for declarative and functional programming

createInterface is a declarative method that creates a custom-element without using the class syntax.

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

import createInterface from 'create-interface';
 
const newCustomElement = createInterface(
  'new-cusomt-element', 
  HTMLElement, 
  {...callbacks}
);
 
customElements.define('new-cusomt-element', newCustomElement); 
 

Extend a Custom Element from a Custom Element

...
 
const anotherCustomElement = createInterface(
  'new-cusomt-element',
  newCustomElement,
  {...newCallbacks}
);
 
customElements.define('another-cusomt-element', anotherCustomElement); 

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