https://github.com/thipages/m-element
custom-element class with (a)sync loading, slots, error handling and level-up
https://github.com/thipages/m-element
asynchronous custom-elements error-handling level-up life-cycle load-event-handling slots synchronous
Last synced: 5 months ago
JSON representation
custom-element class with (a)sync loading, slots, error handling and level-up
- Host: GitHub
- URL: https://github.com/thipages/m-element
- Owner: thipages
- License: mit
- Created: 2024-11-03T05:00:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-25T08:56:46.000Z (over 1 year ago)
- Last Synced: 2025-06-01T09:15:33.059Z (about 1 year ago)
- Topics: asynchronous, custom-elements, error-handling, level-up, life-cycle, load-event-handling, slots, synchronous
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# m-element
`MElement` class extends [HTMLParsedElement](https://github.com/WebReflection/html-parsed-element) 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
``` javascript
import MElement from `@titsoft/m-element`
customElements.define('a-custom-element', class extends MElement {
constructor () {
super()
// or super( { onLoadHtml: '
a waiting message
' } )
}
init() {}
// or async init() {}
})
```
> - Do not call `connectedCallback` or `parsedCallback` or override them,
> - Use `disconnectedCallback` or `attributeChangedCallback` as usual
``` html
```
### level-up attribute example
``` javascript
import MElement from `@titsoft/m-element`
customElements.define('a-custom-element', class extends MElement {
constructor () {
super()
}
// or async init() {}
init() {
this.innerHTML = `
I will replace my transient parent
This one as well
`
}
})
```
```html
```