can-custom-elements

0.1.2 • Public • Published

can-custom-elements

Build Status npm version

Usage

Import/require can-custom-elements and use the Element to derive your own classes. Calling customElements.define will register your element with the window's registry of custom elements.

var Element = require("can-custom-elements").Element;
require("can-custom-elements/attributes");
var define = require("can-define");
var stache = require("can-stache");
 
var view = stache("Hello {{name}}");
 
class HelloWorld extends Element {
    static get view() {
        return view;
    }
}
 
define(HelloWorld.prototype, {
    name: {
        attribute: true,
        type: "string",
        value: "world"
    }
});
 
customElements.define("hello-world", HelloWorld);

API

can-custom-elements function

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

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-custom-element");
 
var SuperButton = class extends CustomElement(HTMLButtonElement) {
 
};
 
customElements.define("super-button", SuperButton);
  1. Element {HTMLElement}: The base element from which to derive.
  • returns {CanElement()}: A derived element with CanJS behaviors added.

CanElement {function}

An interface for derived elements using either can-custom-elements or undefined.

function()
  • returns {undefined}:
CanElement.view {Object}

A static getter that returns the renderer function used to render the element's shadow DOM.

Object

Contributing

Making a Build

To make a build of the distributables into dist/ in the cloned repository run

npm install
node build

Running the tests

Tests can run in the browser by opening a webserver and visiting the test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test

Package Sidebar

Install

npm i can-custom-elements

Weekly Downloads

1

Version

0.1.2

License

MIT

Last publish

Collaborators

  • matthewp