CustomElement

MMO.elements · 1 symbol · generated 30 Sep 2026

mixin

CustomElement

CustomElement mixin WARNING: It is a class mixin. Meaning you extend it with a parameter

class MMO.elements.CustomElement extends ClassElement

Namespace: MMO.elements
Extends: ClassElement

# Observed attributes If you declare any observedAttributes: - normally the view.content is direclty updated. - But if you create a getter/setter for this attribute, you can change the way the value is stored in the view content. get value() {return this.view.content.get('value');} set value(name) {this.view.content.set('value', 'Hello ' + name);} # Inside DOM Normally the view is rendered directly after the connectedCallback call. But if you want to wait for the dom to be loaded first, write this: ```js init() {this.domReady(() => super.init())} ```

class P extends MMO.elements.CustomElement(HTMLParagraphElement) {..}

static get observedAttributes() {return ['value'];} - when attribute value changes -> this.view.content.set('value', this.getAttribute('value')) - to change this behavor:

Index

	promise readonly accessor	Resolved once the element is connected AND the document has loaded.
	defaultAttributes static readonly accessor
	ViewDefault static readonly accessor	The data the element's view starts with.
	observedAttributes static readonly accessor	Get a list of observable attributes
	constructor()
	remove()	Override: tear the view down (watches and listeners included) before leaving the dom.
	replaceWith(args)	Override: tear the view down before being replaced.
	domReady(success)	Run a callback once the document has loaded.
	ready(success)	Run a callback once the element is fully ready.
	isInitialized()
	onMutation(callback, watchSubtree)	Register a callback to be called when children are added/deleted from this element NOTE: to stop the watch, call `disconnect` on the returned MutationObserver
	render($view)	static get AttributesSchema() { return MMO.schemas.exists(this.name)?
	init()	Render the element, then hoist the <style> tags it produced up to the document head (or to the enclosing shadow root), once per element type rather than once per instance.
	errorMessage(title, message)	Replace the element's content with a loud red error banner.
	attributeChangedCallback(name, oldVal, newVal)
	connectedCallback()	Custom element lifecycle: render once, then push the declared attributes into the view.

Properties4

promise

readonlyaccessorCustomElement.js:92

Resolved once the element is connected AND the document has loaded.

get promise()

Type: Promise<this>

defaultAttributes

staticreadonlyaccessorCustomElement.js:142

static get defaultAttributes()

ViewDefault

staticreadonlyaccessorCustomElement.js:150

The data the element's view starts with. Override it to seed the model.

static get ViewDefault()

Type: Object

observedAttributes

staticreadonlyaccessorCustomElement.js:158

Get a list of observable attributes

static get observedAttributes()

Type: Array<string>

Methods12

constructor()

CustomElement.js:37

constructor()

remove()

CustomElement.js:74

Override: tear the view down (watches and listeners included) before leaving the dom.

remove()

replaceWith(args)

CustomElement.js:83

Override: tear the view down before being replaced.

replaceWith(...args)

...args ...(Node | string)

domReady(success)

CustomElement.js:101

Run a callback once the document has loaded.

domReady(success)

success	`Function`
returns	`Promise`

ready(success)

CustomElement.js:110

Run a callback once the element is fully ready. MMO.elements.CustomElement#promise

ready(success)

success	`Function`
returns	`Promise`

isInitialized()

CustomElement.js:117

isInitialized()

returns boolean true once connectedCallback has run

onMutation(callback, watchSubtree)

CustomElement.js:129

Register a callback to be called when children are added/deleted from this element NOTE: to stop the watch, call disconnect on the returned MutationObserver

onMutation(callback, watchSubtree = false)

callback
watchSubtree = false
returns

render($view)

CustomElement.js:185

static get AttributesSchema() { return MMO.schemas.exists(this.name)? MMO.schemas.getById(this.name) : this.BuildAttributesSchema(); }

render($view)

$view

init()

CustomElement.js:191

Render the element, then hoist the <style> tags it produced up to the document head (or to the enclosing shadow root), once per element type rather than once per instance.

init()

errorMessage(title, message)

CustomElement.js:220

Replace the element's content with a loud red error banner.

errorMessage(title, message)

title	`string`
message	`string`

attributeChangedCallback(name, oldVal, newVal)

CustomElement.js:228

attributeChangedCallback(name, oldVal, newVal)

name
oldVal
newVal

connectedCallback()

CustomElement.js:245

Custom element lifecycle: render once, then push the declared attributes into the view. Runs only on the FIRST connection, so moving the element around is cheap.

connectedCallback()

A rendering error is caught and shown in place rather than breaking the page.