Create Interface

Create custom elements without classes

Create Interface is not a wrapper around class, it's uses Reflect.construct internally for new instances and inheritance.

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 mimics 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, name, oldValue, newValue)

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 2024 Julien Etienne