0.8.0 • Published 8 months ago

@titsoft/m-element v0.8.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

m-element

MElement class extends HTMLParsedElement with the following addition:

  • constructor argument
    • { onLoadHtml } html string used in async initialization (default ''),
    • { onErrorHtml } html string used for async errors (default ''),
  • methods
    • init() (sync or async) called by parsedCallback
    • originalText(remove) for getting the original textContent,
    • originalFragment(remove) for getting the original childNodes appended to a document fragment,
      • remove argument to delete from memory the text or fragment (default : true),
    • getSlotByName(name) to get all mamed slots present as custom-element children but removed and stored for later use,
  • events
    • onload triggers when async init finishes (sync init also)
  • attributes
    • a boolean level-up attribute to replace the just created custom-element by its children.

Usage

import MElement from `@titsoft/m-element`

customElements.define('a-custom-element', class extends MElement {
    constructor () {
        super() 
        // or super( { onLoadHtml: '<p>a waiting message</p>' } )
    }
    init() {}
    // or async init() {}
})
  • Do not call connectedCallback or parsedCallback or override them,
  • Use disconnectedCallback or attributeChangedCallback as usual
<a-custom-element></a-custom-element>

level-up attribute example

import MElement from `@titsoft/m-element`

customElements.define('a-custom-element', class extends MElement {
    constructor () {
        super()
    }
    // or async init() {}
    init() {
        this.innerHTML = `
            <div>I will replace my transient parent</div>
            <div>This one as well</div>
        `
    }
})
<!-- finally, this will create the two divs only -->
<a-custom-element level-up></a-custom-element>
0.8.0

8 months ago

0.7.0

9 months ago

0.6.1

9 months ago

0.6.0

9 months ago

0.3.0

10 months ago

0.5.0

10 months ago

0.4.1

10 months ago

0.4.0

10 months ago

0.5.1

10 months ago

0.2.0

10 months ago

0.1.1

10 months ago

0.1.0

10 months ago