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
    

    Install

    npm i can-custom-elements

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • matthewp