can-element

Allows you to create customelement classes with CanJS. Safari only supports custom elements that derive from HTMLElement, so you'll usually want to use Element.

`CustomElement(Element)`

Create a base Element class based on Element, any element that derives from HTMLElement.

Important: Safari only supports custom elements that derive from [HTMLElement].

var CustomElement = require("can-element");

var SuperButton = class extends CustomElement(HTMLButtonElement) {

};

customElements.define("super-button", SuperButton);

Parameters

Element {HTMLElement}:
The base element from which to derive.

Returns

{CanElement()}:

A derived element with CanJS behaviors added.

Use

can-element makes it possible to create standard custom elements (part of web components).

Use can-element to create a class that can be passed into customElements.define to register the element in the window.

var Element = require("can-element").Element;
var stache = require("can-stache");
var define = require("can-define");

var view = stache("Hello {{name}}");

var MyApp = class extends Element {
    static get view() {
        return view;
    }
};

define(MyApp.prototype, {
    name: {
        value: "world"
    }
});

customElements.define("my-app", MyApp);

var el = document.createElement("my-app");

el.name; // -> "world"