can-custom-elements v0.1.2

can-custom-elements

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);

• can-custom-elements function
  • CustomElement(Element)
    • can-custom-elements.properties
    • can-custom-elements.modules
      • can-custom-elements.attributes
    • can-custom-elements.types
      • CanElement function
        • CanElement.view Object

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