ce-v0

    0.2.2 • Public • Published

    Custom Elements V0 API

    A cross browser document.registerElement without built-in extends.

    donate License: ISC

    How to use it

    Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.

    <script src="https://unpkg.com/ce-v0@latest/min.js"></script>

    Compatibility

    Same compatibility of original polyfill: every Mobile and Desktop browser.

    You can verify your browser compatibility live.

    V0 API

    var MyElement = document.registerElement(
      'my-element',
      {
        prototype: Object.create(
          HTMLElement.prototype, {
          createdCallback: {value: function() {
            console.log('custom element ready/upgraded');
            // better than V1 constructor() {}
            // because the element here will always
            // be already upgraded
          }},
          attachedCallback: {value: function() {
            console.log('custom element connected');
            // same as connectedCallback
          }},
          detachedCallback: {value: function() {
            console.log('custom element disconnected');
            // same as disconnectedCallback
          }},
          attributeChangedCallback: {value: function(
            name, oldValue, newValue
          ) {
            console.log('*any* attribute change');
            // different from V1 in two ways:
            //  * it does not trigger twice with same attribute value
            //  * it triggers for any attribute change, no need
            //    to define static get observedAttributes() {[...]}
          }}
        })
      }
    );
     
    // example via createElement
    document.body.appendChild(document.createElement('my-element'));
    // using the class directly
    document.body.appendChild(new MyElement);

    No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).

    Why resurrecting a deprecated API?

    TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.

    This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.

    To know more, please read the related blog entry.

    Still future friendly!

    By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.

    Don't you like it? Use Component

    const MyElement = new Component({
      // the Custom Element name
      name: 'my-element',
      // one or more static property
      static: {
        TEST: 123,
        method() {}
      },
      // alias for createdCallback
      // the component is ready/upgraded here
      constructor() {},
      // alias for attributeChangedCallback
      onattribute() {},
      // alias for attachedCallback
      onconnected() {},
      // alias for detachedCallback
      ondisconnected() {}
      // any other prototype definition is allowed
      // including getters and setters
    });

    Install

    npm i ce-v0

    DownloadsWeekly Downloads

    22

    Version

    0.2.2

    License

    ISC

    Unpacked Size

    37 kB

    Total Files

    7

    Last publish

    Collaborators

    • webreflection