JavaScript

JavaScript runs in two places on Pagelove, and this section is split to match:

• Client — the pagelove.mjs browser library: schemas, templates, two-way data binding, declarative commands, web components, and real-time mutation streaming, so you can build complete apps with minimal application JavaScript.
• Server — JavaScript that runs inside dombase-js during composition and validation: schema bindings (default/@read/@write/@validate) and the DOM API those bindings use to traverse and build markup.

The rest of this page is the client library. For the server side, see Server-side JavaScript below.

Loading the library (client)

Most pages need only two script tags:

<script type="module" src="https://pagelove.github.io/beta-js/pagelove/sse.mjs"></script>
<script type="module" src="https://pagelove.github.io/beta-js/pagelove.mjs"></script>

Loading pagelove.mjs auto-instantiates a Pagelove instance bound to <main> when the page has one, so most pages need no application JavaScript. See The Pagelove class for auto-start details and how to construct instances explicitly.

The five files

What's documented on each page

HTML patterns you write:

• Schema instances in HTML — the <article itemscope itemtype id> shape.
• Schema definitions in HTML — declaring schemas with properties, inheritance, and client-side defaults.
• HTML bindings — data-bind, data-bind-attr, and data-bind-<htmlattr>.
• Declarative commands — --create-instance and --remove-instance buttons.
• Web Components — auto-defined custom elements and the mixin registry.

JavaScript API:

• The Pagelove class — constructor config, public methods, the auto-start behavior.

Real-time:

• Server-Sent Events — live mutation streaming.

Lower layer:

• Primitives — the low-level HTTP client. Most apps don't touch it directly.

Utility:

• Debug channels — bitwise debug mask and gated logging.

Server-side JavaScript

The same language authors server-side schema logic, evaluated by dombase-js during composition and validation:

• JavaScript in schemas — ES modules in a property's default, @read, @write, or @validate slot (the JavaScript peer of Sessel resolvers).
• JavaScript DOM API — the WHATWG-style DOM subset (document, querySelector, createElement, classList, …) those bindings use to read and build markup.

Composition-time JavaScript expression bindings (j: attributes) also run server-side; they live with the other page-composition bindings under Composing pages.

See also

• OPTIONS method

Schema instances in HTML

A schema instance is an HTML element marked up with Microdata that pagelove.mjs recognizes as an addressable record.

When to reach for it

Reach for an instance whenever a record needs to live on the page. Use one per note, post, comment, or any other typed item the renderer will bind to a template and the patch pipeline will mutate in place.

Anatomy of an instance

An instance is an <article> element carrying Microdata attributes. The element's tag does not have to be <article>, but create() always produces one.

Instances created by create() receive an auto-generated id of the form item-<base36-timestamp><random>.

How instances are discovered

On load, pagelove.mjs runs #discoverInstances() against the document. The selector is:

[itemscope][itemtype]:not(template):not([itemprop])

Discovery rules:

• Elements inside a <template> are skipped.
• Elements carrying itemprop are skipped — they are nested properties, not top-level instances.
• Instances whose itemtype has no matching template in the document are skipped silently. No error is raised.
• When an explicit schema root is configured, only its direct [itemscope][itemtype][id] children are scanned.

The renderer locates a template by exact itemtype URL match against <template itemtype="…"> elements already indexed by #discoverTemplates().

Property elements inside an instance

create() builds one child element per property, keyed off the schema type:

Properties with cardinality 0..n and no value are omitted at creation and appended later. Nested schema values must be passed as an HTMLElement; raw objects are skipped.

The full grammar of property elements lives on the sibling page Schema definitions in HTML.

Examples

Primitive properties only

<article itemscope
         itemtype="https://schema.host/Note"
         id="item-lxk3p2m1-a7b4">
  <meta itemprop="title" content="Grocery list">
  <meta itemprop="body" content="Bread, olives, lemons.">
  <meta itemprop="color" content="#ffd166">
</article>

Nested item

<article itemscope
         itemtype="https://schema.host/Post"
         id="item-lxk3p9zq-f2c8">
  <meta itemprop="title" content="On discovery">
  <time itemprop="publishedAt" datetime="2026-04-08T09:15:00Z"></time>
  <article itemprop="author"
           itemscope
           itemtype="https://schema.host/Person"
           id="item-lxk3pa11-91de">
    <meta itemprop="name" content="Ada Park">
    <meta itemprop="handle" content="ada">
  </article>
</article>

The nested <article> carries both itemprop="author" (tying it to the parent) and its own itemscope/itemtype. Because it has itemprop, #discoverInstances() will not treat it as a top-level instance — it belongs to its parent.

See also

• Schema definitions in HTML — how the schema itself is declared.
• HTML bindings — how templates bind to discovered instances.

JavaScript in schemas

JavaScript in schemas lets you embed ES module source in a property's default, @read, @write, @validate, or @computed, and in a Method's implementation. The server evaluates the module on every write or read in an isolated context, sharing the request budget with Sessel. The same source is also browser-runnable, so a binding may also execute client-side under the future browser-side schema runtime.

When to reach for it

Reach for a JavaScript binding when the logic is more naturally expressed as a small ES module than a Sessel expression — for example, when reusing a familiar JavaScript idiom for string normalisation, when the same source needs to run unchanged on the server and (later) in the browser, or when the binding needs to construct schema instances via the pagelove:schema import.

JavaScript authors the default slot, the three pipeline slots (@read, @write, @validate), the schema-level @validate slot, computed properties (@computed), and method bodies (implementation). Other expression slots accept Sessel only at present: constraints, mutation handlers, HTTP queries, and e:-attribute expression bindings in SSPI templates. Group constraints and shape constraints are not expressions in either language — they are declarative Microdata and CSS selector forms.

Shape

A JavaScript binding is a typed Microdata item with itemtype="https://pagelove.org/JavaScript/Module" placed in a property's default, @read, @write, or @validate slot. Its source child carries the ES module text, conventionally inside a <script type="module"> so the same string is also browser-runnable.

<div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default () => String(Math.floor(100 + Math.random() * 500));
  </script>
</div>

The dispatcher selects the language by the itemtype URL of the typed item, never by <script type>. The <script> tag is a browser-execution affordance, not a server-data signal.

The export default contract

The module must have a default export, and that export must be a function — arrow or function form. The server:

1. Evaluates the module in a fresh context.
2. Reads the default export off the module namespace.
3. Verifies it is a function.
4. Calls it with this bound to the in-progress instance and one positional argument, context.
5. Converts the return value back to a dombase value.

ES modules always run in strict mode, so arrow functions do not bind their own this. A binding that needs to read this must use a function form:

export default function() { return this.firstname; }

A module with no default export, or a default export that is not a function, fails with the shape variant.

Slot semantics

For property-level @read, @write, and @validate, the first argument is the pipeline value, not the owning instance. For default, schema-level @validate, and @computed, this is the instance — so these must use a function form to read this (an arrow function in a strict-mode ES module does not bind its own this). Method bodies also bind this to the owning instance (the Class constructor for static methods) — see Method bodies below.

Computed properties (@computed)

An @computed slot makes a property's value always derived from a binding, with no value stored for it. The binding runs on every read; assigning to the property is rejected, since there is nothing to assign to.

<div itemprop="@computed" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default function() { return this.firstName + " " + this.lastName; }
  </script>
</div>

this is bound to the owning instance (a function form is required to read it). If a property declares both @computed and @read, @computed wins and @read never runs for it. A legacy, Sessel-only shorthand — an @read slot whose typed item is the bare https://pagelove.org/Sessel type — is also still recognized as a computed property for backward compatibility; new schemas should prefer @computed. See Property for the full behavior, including the legacy form.

Method bodies

A Method's implementation slot accepts a JavaScript module the same way a property binding does:

<div itemprop="property" itemscope itemtype="https://pagelove.org/Method">
  <meta itemprop="name" content="greet">
  <div itemprop="parameter" itemscope itemtype="https://pagelove.org/Parameter">
    <meta itemprop="name" content="greeting">
  </div>
  <div itemprop="implementation" itemscope itemtype="https://pagelove.org/JavaScript/Module">
    <script itemprop="source" type="module">
      export default function(greeting) { return greeting + ", " + this.name + "!"; }
    </script>
  </div>
</div>

this is bound to the calling object — the schema instance for an instance method, or the Class constructor for a static method. Parameters are forwarded positionally, in the method's declared parameter order (Sessel implementations instead read each parameter by name). A method body may be async; the engine drives its returned Promise to settlement the same way an async default export settles.

Method bodies also dispatch when a schema method is invoked through page composition — a namespaced method element (<ns:method>) or an ns:method="…" attribute. There, this is the host element the method was dispatched on (read-only), arguments bind by name from the dispatch element's attributes (rather than positionally), an ambient read-only document is available, and the return value is spliced into the page. See Method Elements for the composition-side contract, and Methods for the schema-level declaration.

A method body dispatches in a third context too: when the method is called from another server-side expression — a trigger's action, a processor, a mutation handler, or a nested method call made by another method (whether that caller is written in Sessel or JavaScript). Here the call behaves like a direct instance.method(...) call: arguments are forwarded positionally in declared order, this is the receiver, and the return value is the method's value. A read-only document global is available only when the receiver is an element; a typed schema instance receives no document global and operates on this.

In this third context the method also has full access to the shared Context: it can read ambient entries such as Context.request, and any Context.foo = … assignment it makes is written back to the pass's Context — the same Context a Sessel method mutates in the same place — so a processor or trigger that reads Context afterwards observes the change. (Reading per-user request identity marks the response as user-specific, just as it does in composition.)

Whichever way a method is dispatched — through page composition (<ns:method> splicing its return into the page) or from another server-side expression — when it returns a typed schema instance it builds, that instance is treated exactly as new SchemaName { … }: its schema's @default values are filled in for any properties left unset, and it is validated against the schema (missing a required property with no default, or a wrong type, raises an error). So a method can construct and return an instance and rely on the same defaults and validation Sessel construction gives — you don't have to set defaulted properties yourself.

this and context for default

this — the in-progress instance

this is a read-only plain JS object view of the element being created. It exposes the schema-declared property keys that are already set — fields supplied by the client on the write, or fields set earlier in construction. Mutations to this inside a default expression are not preserved.

A default on one property may not read the value of another property whose default is also being computed in the same creation. Reading such a field returns undefined. Cross-property default ordering is not part of the public schema contract.

context — request and host information

context is a plain JS object passed as the first positional argument. The first cut carries a minimal set of well-known keys:

Authors must read only the keys they need and not enumerate or rely on the exact set. Future revisions may add keys.

The document global

Separately from context, a default expression also has access to a document global — a live view of the in-progress element that supports the same DOM methods as the JavaScript DOM API, including mutations (document.querySelector(...), appending or removing elements, and so on). Any changes made through document are kept: they're applied to the element being created.

Other binding kinds that also receive a document global (for example @write bindings) get a read-only version — calling a mutating method throws.

Chaining order

When a property has pipeline bindings at multiple levels of a schema inheritance chain, stages are chained:

Pipeline chains can mix Sessel and JavaScript freely across the inheritance hierarchy. A parent's Sessel stage feeds a child's JavaScript stage, and vice versa, in the order above.

Importing schemas

A schema import uses the schema URL as the module specifier, with a fixed type import attribute of "https://pagelove.org/Schema":

import Note from "https://moodboard.pagelove.org/Note" with { type: "https://pagelove.org/Schema" };

The schema URL is an identifier, not a fetchable URL. The module loader resolves the import at evaluation time by looking up the schema in the host's schema cache. An unknown schema fails with the unknown-schema variant.

Each import yields a JavaScript class with the schema's short name (the last path segment of the itemtype URL). The class is synthesised at evaluation time and supports construction, property access, instanceof, and method dispatch.

All other import specifiers (relative paths, bare specifiers, HTTP URLs) are rejected with the import-not-allowed variant. There is no pagelove:host module.

Working with imported classes

Schemas inheriting from https://pagelove.org/Map produce classes that extend Map, with keys, values, entries, and merge exposed. Undeclared property reads fall through to the Map backing store.

Supported language features

Supported:

• ES2020+ syntax: const/let, arrow and function forms, destructuring, spread/rest, template literals, default parameters, async/await at the expression level, optional chaining, nullish coalescing, numeric separators.
• Standard built-in globals: Math, Date, JSON, String, Number, Array, Object, Map, Set, RegExp, Symbol, and the other ECMAScript built-ins.
• Template literals and tagged templates.

Not supported:

• import statements other than pagelove:schema.
• Host I/O globals: no fetch, no process, no require, no filesystem or environment access.
• Network and timers: setTimeout and setInterval are not available.

Math.random() and Date.now() are permitted and return legitimately different values on the server and the browser. Bindings commit logic over inputs, not clock or RNG agreement; the server's value is what gets stored.

Resource limits

Every evaluation runs under a per-request budget. In production the budget is read from the host's https://pagelove.org/TransactionBudget Microdata, shared with Sessel. A request touching one Sessel binding and one JavaScript binding sees a single shared budget, not two competing ones.

Errors

Every failure is rendered to the client as an HTML Microdata document of type https://pagelove.org/BindingFailure, nested inside the https://pagelove.org/SchemaViolation envelope.

The rendered failure carries at minimum:

<div itemscope itemtype="https://pagelove.org/BindingFailure">
  <meta itemprop="language" content="https://pagelove.org/JavaScript/Module">
  <meta itemprop="variant" content="threw">
  <p itemprop="message">TypeError: Cannot read properties of undefined (reading 'foo')</p>
  <pre itemprop="stack">    at default (eval:2:17)</pre>
</div>

The stack property is present for threw when the engine provided one and absent otherwise. Sessel bindings produce structurally identical BindingFailure items with a different language value.

Tracing

Every JavaScript evaluation produces an OpenTelemetry-compatible span named dombase_js.evaluate:

A child span dombase_js.compile wraps the compile step on the first use of a given source on a thread. Cross-language Sessel calls from within JavaScript nest as children of the dombase_js.evaluate span.

Marshalling

Values flow between dombase and JavaScript at every binding boundary:

First-cut exclusions

The following are out of scope for the current cut. Each is either a deferred feature or an interim limitation that will be lifted without breaking existing bindings:

• Imports other than pagelove:schema. No pagelove:host module. No relative or HTTP imports.
• Constraints, mutation handlers, HTTP queries, and e:-attribute expression bindings in SSPI templates. All Sessel-only at present.
• Cross-property this access on default. A default cannot read another property whose default is also being computed on the same creation.
• Browser-side execution of these bindings. The source-level contract that makes browser-side execution possible is committed; the runtime that calls it client-side is a future spec.

Examples

Random coordinate default

<div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default () => String(Math.floor(100 + Math.random() * 500));
  </script>
</div>

Timestamp default reading context

<div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default function(context) {
      return `created at ${new Date().toISOString()}`;
    }
  </script>
</div>

Normalise on write

<div itemprop="@write" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default (val) => typeof val === 'string' ? val.trim().toLowerCase() : val;
  </script>
</div>

Format on read

<div itemprop="@read" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default (val) => typeof val === 'string' ? val.toUpperCase() : val;
  </script>
</div>

Validate at persistence

<div itemprop="@validate" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default (val) => typeof val === 'string' && val.includes('@');
  </script>
</div>

Default that constructs a schema instance

<div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    import Note from "https://moodboard.pagelove.org/Note" with { type: "https://pagelove.org/Schema" };
    export default () => new Note({ title: "untitled", x: 0, y: 0 });
  </script>
</div>

Computed property combining two fields

<div itemprop="@computed" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default function() { return this.firstName + " " + this.lastName; }
  </script>
</div>

Method body using a parameter and this

<div itemprop="implementation" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default function(greeting) { return greeting + ", " + this.name + "!"; }
  </script>
</div>

See also

• JavaScript DOM API — the DOM subset (document, querySelector, createElement, classList, …) a JavaScript binding can use to traverse and build markup
• Property — the slot in which default, @read, @write, @validate, and @computed are declared
• Methods — the schema-level declaration a method body's implementation slot belongs to
• Method Elements — invoking a method during page composition
• Resolvers — @read and @write pipeline semantics shared with Sessel
• Schema — inheritance, which determines pipeline chain order
• Sessel — the peer binding language; both share the same slots and error envelope
• Schema definitions in HTML — the client-side counterpart that runs JavaScript modules in the browser

HTMLAnchorElement

The interface for <a>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

JavaScript DOM API

JavaScript bindings — schema methods and the @read / @write / @validate / @computed resolvers declared as JavaScript modules — can traverse and build markup with a WHATWG-style DOM API. It is exposed through the ambient document global and through node/element handles.

This is a subset chosen to make isomorphic (server and browser) bindings writable; anything not listed in these pages is not available server-side. Each interface is documented on its own page:

• Document — the document global: querying, node factories, and documentElement/head/body.
• Element — attributes, content (innerHTML/outerHTML/textContent), classList, element traversal, and insertion.
• Node — traversal and tree mutation shared by every node, plus the Node type constants.
• NodeList — the static collection returned by queries and child lists.
• DOMParser and XMLSerializer — parse a fresh document, serialise a node to a string.
• DOMException — the error type every thrown DOM error is an instance of, and its legacy name → code table.

Interfaces and instanceof

The WHATWG node interfaces exist as real classes, with working instanceof and constructor.name, in the standard hierarchy:

• Node → Document, DocumentFragment, Element → HTMLElement → per-tag interfaces (HTMLAnchorElement, HTMLInputElement, …; and HTMLMediaElement → HTMLVideoElement/HTMLAudioElement), CharacterData
• CharacterData → Text, Comment

So p instanceof Element, p instanceof Node, and textNode instanceof CharacterData all hold — a binding can branch on node kind the same way it would in the browser. HTML elements (HTML-parsed or createElement) are HTMLElement (so htmlEl instanceof HTMLElement, and htmlEl.constructor.name is "HTMLElement"); elements in another namespace (createElementNS, e.g. SVG) are plain Element. Members are interface-scoped: reaching for a member that is not part of a node's interface yields undefined (for example textNode.tagName and element.data are both undefined) rather than throwing. Within a node's own interface, an accessor with no value returns null (for example element.parentNode on a detached element).

Per-tag element interfaces. Every non-deprecated HTML tag that has its own dedicated interface in the WHATWG spec has one here too, below HTMLElement — an <a> is an HTMLAnchorElement, an <input> an HTMLInputElement, and so on (a instanceof HTMLAnchorElement, a.constructor.name === "HTMLAnchorElement"; and the whole chain up to Node holds). Each has its own reference page listing its reflected IDL attributes (a.href, img.src, input.required, …) — see the Element interfaces index for the full list of interfaces and their pages. A handful of obsolete WHATWG §16.3 elements (<font>, <marquee>, …) also have their interface, marked deprecated on their page. An HTML tag with no dedicated interface — either because the spec never gave it one (<section>, <article>, …) or it isn't yet covered — is a plain HTMLElement with no reflected properties beyond HTMLElement's own (so section.href is undefined); use getAttribute / setAttribute there. A single flattened node still backs every node internally — the interfaces are a prototype layer over it.

Availability and the read-only boundary

The ambient document global is present whenever the binding runs against a document. Whether it is writable depends on the binding slot:

A read-only ambient document protects the existing tree: mutating a node that is already in the document — setting an attribute, changing text, inserting or removing a child — throws a NoModificationAllowedError (message: "document is read-only in this binding context"). Read-only membership is a property of the tree as it stood when the binding started, not of how you reached a node: every node that was in the document is read-only through any path (document.body, querySelector, parentNode, a NodeList, classList), so a node cannot be laundered into a writable handle by reaching it a different way.

Constructing new nodes is always allowed, even against a read-only document. createElement, createElementNS, createTextNode, createComment, createDocumentFragment, and cloneNode return fresh, writable detached nodes; building a subtree from them and returning it works with the standard DOM API:

export default (title) => {
  const li = document.createElement("li");
  li.textContent = title;
  return li;   // return an element — see "Returning DOM"
};

The one thing you cannot do is move a node out of the read-only tree into your constructed subtree — that would mutate the tree it belongs to, so card.appendChild(document.querySelector("li")) throws NoModificationAllowedError. To reuse existing content, copy it with cloneNode(true), which yields a writable copy you can attach freely:

const copy = document.querySelector("li").cloneNode(true);
card.appendChild(copy);   // fine — a clone is a fresh, writable node

Mutations to a writable ambient document (a default resolver, or a document you parsed yourself) are serialised back and persisted after the binding returns.

Returning DOM from a binding

The value a binding returns is spliced into the composed document:

Errors

Thrown errors are DOMException instances with the standard name/code/message. new DOMException(message?, name?) is available, and the full legacy name → code table is supported — see the DOMException reference. The names actually raised by this API:

Divergences from the browser DOM

• Per-tag element interfaces carry reflected IDL attributes (each interface's own page lists them); a tag with no dedicated interface is a plain HTMLElement with no reflected properties beyond HTMLElement's own (use getAttribute / setAttribute). Where reflection is present, two divergences are inherent to a static server DOM: value-like properties (input.value, option.value, textarea.value) reflect the content attribute (the browser's defaultValue), not live editing state; and URL properties (.href, .src) reflect verbatim with no base-URL resolution. See Reflected properties: shared semantics for the numeric/enum/contentEditable canonicalization rules.
• querySelector / querySelectorAll called on an element scan the whole document, not the element's subtree (unlike the browser). getElementsByTagNameNS, closest, matches, getElementById, and children are receiver/subtree-scoped.
• children (and all query results) are a static NodeList, not a live HTMLCollection.
• tagName case is keyed on the stored namespace: uppercased for elements with no namespace (HTML-parsed elements and createElement), verbatim for createElementNS.
• setAttributeNS stores the qualified name verbatim with no per-attribute namespace map; retrievability via getAttributeNS depends on an in-scope xmlns: prefix mapping the URI.
• createElementNS does not auto-emit xmlns: declarations, and its NamespaceError validation omits the browser's reserved xml / xmlns prefix rules.
• CSS namespace-pipe selectors (p|tag, *|tag) are unsupported (p| throws SyntaxError; *| matches nothing).
• DOMParser().parseFromString ignores the MIME type (always text/html).
• DOM operations are charged against the request's composition budget.

See also

• JavaScript bindings — declaring @read/@write/@validate/@computed/default resolvers and methods as JavaScript modules
• Methods — schema methods (which can build and return DOM)
• Method Elements — invoking a method from a page; how a returned element is spliced

Document

Members of the Document interface, reached through the ambient document global: querying the tree, creating nodes, and reaching the document's structural elements. The factories are mutation-guarded and throw NoModificationAllowedError on a read-only document.

Querying

querySelector

querySelector(selector) → the first matching element, or null. An invalid selector throws SyntaxError.

Divergence: it scans the whole document even when called on an element (not the receiver's subtree).

const title = document.querySelector("main h1");

querySelectorAll

querySelectorAll(selector) → a static NodeList of every match. Invalid selector throws SyntaxError. Also a whole-document scan.

for (const li of document.querySelectorAll("ul#todo > li")) {
  li.classList.add("seen");
}

getElementById

getElementById(id) → the element with that id, or null. The match is a literal string comparison on the id attribute — no CSS parsing, so ., :, and [ match literally. Scoped to the receiver's subtree (a divergence from the browser, where it is always document-wide).

const cart = document.getElementById("cart");

getElementsByTagNameNS

getElementsByTagNameNS(namespace, localName) → a NodeList, scoped to the receiver's descendants (excluding the receiver). "*" matches any namespace or any local name.

const cells = row.getElementsByTagNameNS("*", "td");

Creating nodes

Factory methods returning detached nodes. All are mutation-guarded.

createElement

createElement(tag) → a detached element. tagName later reports the tag uppercased (no namespace).

const li = document.createElement("li");
li.textContent = "New item";

createElementNS

createElementNS(namespace, qualifiedName) → a detached namespaced element. qualifiedName is stored verbatim (case preserved); namespace is recorded as the element's namespace URI. Throws NamespaceError for a malformed qualified name (empty, more than one :, a leading/trailing :, or a prefix with an empty namespace). No xmlns: declaration is auto-emitted.

const g = document.createElementNS("http://www.w3.org/2000/svg", "g");

createTextNode

createTextNode(data) → a detached text node.

const t = document.createTextNode("Hello");

createComment

createComment(data) → a detached comment node.

const c = document.createComment("build: 2026-07-02");

createDocumentFragment

createDocumentFragment() → a detached fragment. Appending the fragment moves its children into the target (leaving the fragment empty).

const frag = document.createDocumentFragment();
for (const name of names) {
  const li = document.createElement("li");
  li.textContent = name;
  frag.appendChild(li);
}
list.appendChild(frag);   // moves every <li> in at once

Document structure

Accessors that reach the document's structural elements — each returns the element or null.

documentElement

The root element (<html>).

const lang = document.documentElement.getAttribute("lang");

head / body

The <head> and <body> elements.

document.body.classList.add("ready");

See also

• Element — what you do with a queried element
• Node — placing created nodes into the tree
• DOMParser and XMLSerializer — build a fresh writable document

Schema definitions in HTML

A schema definition is an HTML element marked up with Microdata that pagelove.mjs reads on load to learn the shape of a record type.

When to reach for it

Reach for a schema definition whenever a new kind of record needs to exist on the page — a Note, a Post, a Comment — and pagelove.mjs must know how to create, render, and bind instances of it client-side.

Anatomy of a schema definition

A schema definition is a <div> (or any element) carrying itemscope and itemtype="https://pagelove.org/Schema". #discoverSchemas() walks every such element on the page.

A schema with no type child is skipped silently.

Property definitions

Each property is an inner itemscope of type https://pagelove.org/Property. A <li> is conventional, but any element works. Its children declare the four fields:

An additional itemprop="@read" child may carry an embedded client-side JavaScript/Module that transforms the value on read.

Inheritance

A schema may declare <meta itemprop="parent" content="…"> pointing at another schema's type URL. #discoverSchemas() resolves inheritance in a second pass:

• Parent properties are inherited first.
• The child's own properties override any parent property with the same name. Child wins.
• An unknown parent URL throws Schema "<child>" declares unknown parent "<parent>".
• An inheritance cycle throws Schema inheritance cycle detected at "<url>".

Only direct property-name collisions override; unrelated parent properties remain.

Static defaults

Place <meta itemprop="default" content="…"> directly inside a property's itemscope. The value is always a string and is used as-is when a new instance is created.

Client-side dynamic defaults

For defaults that must be computed, embed a JavaScript/Module inside the property:

<li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
  <meta itemprop="name" content="createdAt">
  <meta itemprop="type" content="https://pagelove.org/DateTime">
  <div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
    <script itemprop="source" type="module">
      export default () => new Date().toISOString();
    </script>
  </div>
</li>

When pagelove.mjs loads the schema on a page, its loadModule helper finds the wrapper, reads the child <script itemprop="source">, wraps the script text in a Blob, creates a Blob URL with URL.createObjectURL, imports that URL as an ES module, and assigns the module's default export as the property's default. This happens in the browser, on page load, not on the server. The module is invoked whenever pagelove.mjs needs a default value client-side — typically when a new instance is about to be created before the POST.

The @read transform

Same embedding pattern, but the wrapper's itemprop is @read instead of default:

<div itemprop="@read" itemscope itemtype="https://pagelove.org/JavaScript/Module">
  <script itemprop="source" type="module">
    export default (value) => value.toUpperCase();
  </script>
</div>

pagelove.mjs loads this module the same way — Blob URL, dynamic import, default export — and calls it to transform the property value when a client-side consumer reads the property. Like dynamic defaults, @read runs in the browser.

Examples

A schema with static defaults

<div itemscope itemtype="https://pagelove.org/Schema">
  <meta itemprop="type" content="https://schema.host/Note">
  <ul>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="title">
      <meta itemprop="type" content="https://pagelove.org/Text">
      <meta itemprop="cardinality" content="1..1">
      <meta itemprop="default" content="Untitled">
    </li>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="body">
      <meta itemprop="type" content="https://pagelove.org/Text">
    </li>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="color">
      <meta itemprop="type" content="https://pagelove.org/Text">
      <meta itemprop="default" content="#ffd166">
    </li>
  </ul>
</div>

A schema that inherits from a parent

<div itemscope itemtype="https://pagelove.org/Schema">
  <meta itemprop="type" content="https://schema.host/Content">
  <ul>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="title">
      <meta itemprop="type" content="https://pagelove.org/Text">
      <meta itemprop="cardinality" content="1..1">
    </li>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="body">
      <meta itemprop="type" content="https://pagelove.org/Text">
    </li>
  </ul>
</div>

<div itemscope itemtype="https://pagelove.org/Schema">
  <meta itemprop="type" content="https://schema.host/Post">
  <meta itemprop="parent" content="https://schema.host/Content">
  <ul>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="publishedAt">
      <meta itemprop="type" content="https://pagelove.org/DateTime">
    </li>
  </ul>
</div>

Post inherits title and body from Content and adds publishedAt. A title property declared on Post would override the parent's.

A schema with a client-side dynamic default

<div itemscope itemtype="https://pagelove.org/Schema">
  <meta itemprop="type" content="https://schema.host/Event">
  <ul>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="label">
      <meta itemprop="type" content="https://pagelove.org/Text">
    </li>
    <li itemprop="property" itemscope itemtype="https://pagelove.org/Property">
      <meta itemprop="name" content="createdAt">
      <meta itemprop="type" content="https://pagelove.org/DateTime">
      <div itemprop="default" itemscope itemtype="https://pagelove.org/JavaScript/Module">
        <script itemprop="source" type="module">
          export default () => new Date().toISOString();
        </script>
      </div>
    </li>
  </ul>
</div>

When pagelove.mjs builds a new Event in the browser, it calls the module's default export and stamps createdAt with the current time in the user's browser before the instance is posted.

Not supported client-side

pagelove.mjs's schema discovery only reads name, type, cardinality, a static or dynamic default, and a @read transform from each property — it does not implement computed properties (@computed), methods (itemtype="https://pagelove.org/Method"), or schema-level @validate. Declaring any of these in a schema the client library discovers is inert: the extra markup is silently ignored.

All three are real, server-side features — see JavaScript in schemas for computed properties, methods, and schema-level @validate as core evaluates them.

See also

• Schema instances in HTML -- the sibling page covering instance markup.
• Schema -- the broader Reference page for schemas.

HTMLAreaElement

The interface for <area>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTML bindings

An HTML binding is a data-bind* attribute on a view element that pagelove.mjs uses to populate that element from a schema instance — and, when the element is editable, to write user edits back into the schema.

When to reach for it

Reach for a binding whenever a view element needs to show a value from a schema article, or whenever a user edit on the view needs to flow back into the record. Bindings are how the rendered light-DOM view of an instance stays in sync with the underlying <article> without any imperative wiring.

The three binding attributes

Property lookup is always scoped: pagelove.mjs resolves each prop against the direct [itemprop="<prop>"] children of the current schema scope, not against descendants.

Two-way updates

A data-bind element participates in writeback when user input reaches it through one of the delegated DOM events handled by pagelove.mjs:

[contenteditable] elements participate automatically because they fire focusout and input the same way <input> and <textarea> do. No extra markup is required to make a contenteditable heading writeable — the data-bind attribute is enough.

Form controls (input, select, textarea) read and write through the element's value. Every other element reads and writes through textContent. Writes are idempotent: the binder compares before writing, so an unchanged value produces no DOM mutation.

Repetition

A single data-bind element can stamp multiple view elements when the matching schema property repeats. Two conditions trigger repetition:

• The view element carries itemscope — it is treated as a stamp for a nested schema type and is always repeated, even if the current property value list is empty.
• The schema scope contains more than one direct child matching [itemprop="<prop>"] — the stamp is repeated once per value.

#repeatElement() performs the stamp. The original element is removed from the DOM and replaced with a comment marker of the form <!--data-bind:<prop>-->. For each matching schema child, a clone of the stamp is inserted after the marker. If the schema child has no itemscope, the clone receives the scalar value written into its text content. If the schema child is itself an itemscope, the clone is linked to it via data-for="<schemaId>" and #populateBindings() recurses into the clone against the nested schema scope.

Nested scopes

A data-bind that sits inside a deeper [data-for] element is owned by that inner scope, not by the outer pass. During the outer viewRoot.querySelectorAll('[data-bind]') iteration, any element whose closest [data-for] ancestor is not the current viewRoot is skipped. The same rule applies to the data-bind-<htmlattr> sweep. This is what allows nested components to manage their own bindings without the parent rewriting them on every pass.

Examples

Two-way text binding on a heading

<template itemtype="https://schema.host/Note">
  <article class="note">
    <h1 data-bind="title" contenteditable></h1>
    <p data-bind="body" contenteditable></p>
  </article>
</template>

The heading and paragraph reflect the instance's title and body. Editing either in place commits back to the schema article on focusout and during input (debounced).

Forwarding properties as data-* attributes

<template itemtype="https://schema.host/StickyNote">
  <article class="sticky" data-bind-attr="color x y">
    <h1 data-bind="title" contenteditable></h1>
  </article>
</template>

The root <article> receives data-color, data-x, and data-y reflecting the matching properties on the instance. CSS can then read them:

.sticky { background: attr(data-color); transform: translate(attr(data-x px), attr(data-y px)); }

Binding an HTML attribute

<template itemtype="https://schema.host/Link">
  <article>
    <a data-bind-href="url" data-bind="label"></a>
    <time data-bind-datetime="publishedAt" data-bind="publishedAt"></time>
  </article>
</template>

The <a> gets its href from url and its visible text from label. The <time> gets its datetime attribute from publishedAt and its visible text from the same property.

See also

• Schema instances in HTML — the <article> markup a binding reads from and writes to.
• Schema definitions in HTML — how the properties named by a binding are declared.
• The Pagelove class — the runtime that discovers templates and wires up delegated event handlers.

HTMLAudioElement

The interface for <audio>. Extends HTMLMediaElement → HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLMediaElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLMediaElement — inherited reflected properties
• JavaScript DOM API — the interface hierarchy and instanceof

Element

The element surface: identity, attributes, content, classList, element-only traversal, and insertion. All setters and mutators are guarded and throw NoModificationAllowedError on a read-only document. Tree mutation shared with every node (appendChild, remove, …) lives on the Node page.

Identity

Read-only accessors describing the element:

const el = document.querySelector("svg > g");
el.tagName;        // "G"  (or verbatim if created with createElementNS)
el.id;             // "" when absent

Attributes

A set of high-frequency elements expose reflected IDL properties that read and write the matching content attribute — a.href, img.src/img.alt, input.type/input.value/input.required, and other form-control properties (see Reflected IDL attributes below and per-tag interfaces). Elements outside that set are a plain HTMLElement with no reflected properties. Either way, the getAttribute / setAttribute methods below work on every element and are the general mechanism.

getAttribute

getAttribute(name) → the value, or null when absent.

const href = link.getAttribute("href");

hasAttribute

hasAttribute(name) → boolean.

if (input.hasAttribute("required")) { /* … */ }

setAttribute

setAttribute(name, value) — sets or replaces the attribute. Guarded.

link.setAttribute("rel", "noopener");

removeAttribute

removeAttribute(name) — removes it; a no-op when absent. Guarded.

input.removeAttribute("disabled");

getAttributeNS / setAttributeNS / removeAttributeNS

The namespaced variants. getAttributeNS(ns, localName) resolves the URI to an in-scope xmlns: prefix, then reads prefix:localName (null if no in-scope prefix maps the URI). setAttributeNS(ns, qualifiedName, value) stores the attribute under qualifiedName verbatim — the ns argument is used only to validate the qualified name (throws NamespaceError if malformed). removeAttributeNS(ns, localName) resolves URI → prefix and removes prefix:localName.

el.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#icon");
el.getAttributeNS("http://www.w3.org/1999/xlink", "href");   // "#icon"

Reflected IDL attributes

For a set of high-frequency element interfaces, common IDL properties are reflected: reading the property returns the content attribute (or "" when absent, false for boolean properties), and writing it sets — or, for a falsy boolean, removes — the attribute. They are exactly equivalent to getAttribute/setAttribute on the underlying attribute; use whichever reads better.

const a = document.querySelector("a");
a.href;                       // reads the href attribute ("" if absent)
a.href = "/next";             // sets it — a.getAttribute("href") === "/next"
const input = document.querySelector("input");
input.required = true;        // adds the boolean attribute
input.required;               // → true   (input.hasAttribute("required"))

Every interface has its own reference page, listing its reflected properties (see Reflected properties: shared semantics below for how numeric/enum/boolean reflection works in general):

† = a deprecated element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); its interface exists only for instanceof / constructor.name and content-attribute reflection fidelity — the tag is obsolete and should not be used in new content. Some interfaces cover more than one tag (blockquote/q, ins/del, the table sections/cells/cols, the six headings h1–h6). video and audio are HTMLMediaElement subclasses: video instanceof HTMLVideoElement and video instanceof HTMLMediaElement both hold, and both inherit the shared HTMLMediaElement properties (so video.autoplay and audio.controls work), while video-only properties like poster are undefined on an audio.

Reflected properties: shared semantics

Numeric IDL attributes (e.g. td.colSpan/rowSpan, ol.start, img/canvas/video width/height, progress.value/max, meter.*) reflect as the browser's coerced number with per-attribute defaults and clamping — e.g. unset td.colSpan is 1. Enumerated IDL attributes (e.g. input.type, form.method, img/iframe loading, referrerPolicy, and the global dir/inputMode/enterKeyHint/autocapitalize on HTMLElement) canonicalize to their keyword with WHATWG missing/invalid defaults — e.g. unset input.type is "text". One enumerated attribute takes a non-standard shape: crossOrigin is a nullable enum — a missing attribute reflects as null, any present value other than "use-credentials" maps to "anonymous", and assigning null removes the attribute. A few attributes reflect as a string even though the WHATWG IDL might suggest otherwise: embed/object width/height, ol.type, area.shape/coords (verbatim, uncanonicalized, case preserved), and the deprecated §16.3 interfaces' numeric-looking attributes (marquee.*). contentEditable (on HTMLElement) is reflected through a bespoke accessor, not the enum path — see its page for the getter/setter shape.

A property is only present on its own interface — img.href is undefined, not an error (see interface scoping). Two intentional divergences: value-like properties (input.value, option.value, textarea.value) reflect the content attribute (the browser's defaultValue), not live editing state, because the server DOM is static; and URL properties (.href, .src) reflect verbatim with no base-URL resolution.

Content

textContent is documented with the Node content members. The HTML-string members below are element-only.

innerHTML

Get returns the serialised child content. Set parses only the assigned string — the document is never re-serialised and re-parsed. Guarded.

section.innerHTML = "<p>Loaded.</p>";

outerHTML

Get returns the element and its children serialised. Set replaces the element within its parent; throws NoModificationAllowedError if the element has no parent. Guarded.

placeholder.outerHTML = "<img src='/logo.svg' alt='Logo'>";

insertAdjacentHTML

insertAdjacentHTML(position, html) — parses html and inserts it at position (case-insensitive): beforebegin, afterbegin, beforeend, afterend. An invalid position throws SyntaxError; beforebegin/afterend on a parentless node are no-ops. Guarded.

list.insertAdjacentHTML("beforeend", "<li>Appended</li>");

classList

element.classList is a live DOMTokenList over the class attribute — the single source of truth (emptying the list removes the attribute). Mutators are guarded. It is iterable ([...classList], Array.from(classList)).

el.classList.add("active", "highlight");
el.classList.toggle("open");            // → true (now present)
el.classList.replace("active", "done"); // → true
if (el.classList.contains("done")) { /* … */ }

Element traversal

Element-only navigation (skipping text and comment nodes). Each returns an element or null except the count. See Node for the all-kinds accessors (firstChild, nextSibling, …).

for (const row of table.children) { /* each <tr> */ }

closest

closest(selector) → the nearest inclusive ancestor matching the selector, or null. Receiver-scoped. Invalid selector throws SyntaxError.

const form = submitButton.closest("form");

matches

matches(selector) → boolean. Invalid selector throws SyntaxError.

if (el.matches("a[href^='https://']")) { /* external link */ }

Insertion convenience

The WHATWG convenience mutators. String arguments become text nodes. before/after/replaceWith are no-ops on a detached node. All guarded.

heading.after(document.createElement("hr"));
oldBanner.replaceWith("Plain text now");   // string → text node
staleNode.remove();

See also

• Node — tree mutation and all-kinds traversal
• Document — querying and creating elements
• NodeList — what children/querySelectorAll return

Declarative commands

A declarative command is a command="..." attribute on a <button> that pagelove.mjs recognizes and turns into a schema mutation — creating a new instance or deleting an existing one — without any application code.

When to reach for it

Reach for a declarative command whenever a button should add a new schema instance to a view or remove an existing one. The runtime handles the DOM update and the network call; the markup carries all the intent.

Supported commands

Only these two values are acted on by the command handler. Any other command= value on a button inside the view is ignored.

Button attributes

--remove-instance takes no attributes of its own — it infers its target from the nearest [data-for] ancestor of the button.

How the button is wired

pagelove.mjs dispatches command buttons through two delivery paths:

The delegated path is what makes commands work inside <template> content, where commandfor cannot point at an element that does not yet exist.

Where the target comes from

For --create-instance:

For --remove-instance, the target is always the schema element referenced by the nearest [data-for] ancestor. A button with no [data-for] ancestor does nothing.

Inferred itemprop on the new article

After creating the new <article>, pagelove.mjs inspects the target's itemtype. If the target has one, the runtime looks up that schema and searches its property list for a property whose type matches the new instance's type. If a match is found, the new article is given that itemprop. If nothing matches, no itemprop is set.

Optimistic behavior

Both commands update the DOM first and persist in the background.

Examples

Creating a new note

<main id="canvas" itemscope itemtype="https://schema.host/Board">
  <!-- existing notes -->
</main>

<button
  command="--create-instance"
  commandfor="canvas"
  data-schema="https://schema.host/StickyNote">
  Add note
</button>

Activating the button creates a StickyNote article and appends it to #canvas. If Board declares a property of type StickyNote, the new article is tagged with that itemprop automatically.

Deleting the current item from inside a template

<template itemtype="https://schema.host/StickyNote">
  <article class="sticky">
    <h1 data-bind="title" contenteditable></h1>
    <button command="--remove-instance">Delete</button>
  </article>
</template>

Each stamped view sits inside a [data-for] wrapper pointing at its backing article. Clicking the Delete button removes that article from the DOM and fires DELETE() against it.

See also

• HTML bindings — how the stamped view stays in sync with the article the command created.
• Web components — custom elements that can host their own command buttons.
• Schema definitions in HTML — where the property whose type matches the new instance is declared.

HTMLBRElement

The interface for <br>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

Node

Members shared by every node — the document, elements, text, comments, and fragments alike: traversal, tree mutation, character data, and metadata. Element-only navigation (children, firstElementChild, …) is on the Element page. All mutators are guarded and throw NoModificationAllowedError on a read-only document.

Traversal

All-kinds navigation (text and comment nodes are included). Each returns a handle or null.

hasChildNodes

hasChildNodes() → boolean.

if (node.hasChildNodes()) {
  for (const child of node.childNodes) { /* text and elements */ }
}

Metadata

if (node.nodeType === Node.ELEMENT_NODE) { /* it's an element */ }

Character data

textContent

Get concatenates all descendant text (a comment yields its own data). Set replaces every child with a single text node — an empty string leaves no children. Available on every node; guarded.

cell.textContent = "42";
const words = article.textContent.split(/\s+/).length;

data / length

data (get/set) and length (get) are CharacterData members, so they apply to text and comment nodes: data is the character payload, length its Unicode character count. On a node of any other interface they are out of scope, so element.data and element.length are undefined. Setting data is guarded.

const c = document.createComment("draft");
c.data;          // "draft"
c.length;        // 5
c.data = "final";

Tree mutation

A node from another document is adopted (deep-copied); a DocumentFragment argument moves its children (leaving the fragment empty).

appendChild

appendChild(child) → the appended child. Appending a node to its own descendant or itself throws HierarchyRequestError.

list.appendChild(document.createElement("li"));

insertBefore

insertBefore(node, reference) → the inserted node. A null/omitted reference behaves like appendChild; otherwise reference must be a current child, else NotFoundError.

list.insertBefore(newItem, list.firstChild);   // insert at the top

removeChild

removeChild(child) → the removed child (which stays live with parentNode === null). child must be a child, else NotFoundError.

list.removeChild(list.lastChild);

replaceChild

replaceChild(newNode, oldNode) → oldNode. oldNode must be a child, else NotFoundError.

list.replaceChild(document.createElement("li"), staleItem);

cloneNode

cloneNode(deep?) → a detached clone (deep defaults to false). Rejected on a read-only document — the clone would allocate into the read-only arena.

const copy = template.cloneNode(true);

contains

contains(other) → boolean; false across documents.

if (main.contains(node)) { /* node is inside <main> */ }

Node constants

The Node global exposes the standard node-type constants, for comparison against nodeType:

Node.ELEMENT_NODE (1) · Node.TEXT_NODE (3) · Node.COMMENT_NODE (8) · Node.DOCUMENT_NODE (9) · Node.DOCUMENT_TYPE_NODE (10) · Node.DOCUMENT_FRAGMENT_NODE (11)

See also

• Element — attributes, content, and element-only traversal
• Document — creating the nodes you insert
• NodeList — iterating childNodes
• DOMException — the error type these mutators throw

NodeList

Query results and child lists are a single static NodeList type. There is no separate HTMLCollection — children also returns a NodeList. It is a snapshot taken when produced: later mutations to the tree are not reflected.

A NodeList backs childNodes, children, querySelectorAll, and getElementsByTagNameNS.

Members

It is iterable — for…of, spread, and Array.from all work.

const items = document.querySelectorAll("li");

items.length;        // e.g. 3
items.item(0);       // first <li>, or null
items.item(-1);      // null (no negative indexing)

for (const li of items) {
  li.classList.add("counted");
}

const titles = Array.from(items, li => li.textContent);

Because a NodeList is a snapshot, removing a node during iteration does not shorten the list — the snapshot still holds every node that matched when it was produced.

See also

• Node — childNodes and traversal
• Element — children, querySelectorAll on an element
• Document — querySelectorAll, getElementsByTagNameNS

Web Components

A Pagelove Web Component is a real custom element, auto-defined by pagelove.mjs from a <template itemtype> whose root tag is hyphenated, extending the PageloveComponent base class so its light-DOM view stays in sync with its backing schema article.

When to reach for it

Reach for a Web Component when a template is a live, interactive element with its own lifecycle — drag, resize, mixin behavior, or any API the rest of the page will call. Give the template root a hyphenated tag (<sticky-note>, <kanban-card>) and the runtime takes care of the rest.

Auto-defined custom elements

On boot, pagelove.mjs walks every <template itemtype> it has discovered and inspects template.content.firstElementChild. The auto-definition rule is:

Any mixins whose selectors match the template root are stacked onto the base class before customElements.define is called.

The PageloveComponent base class

PageloveComponent extends HTMLElement. It is an autonomous custom element — not a built-in extension — so the root tag itself is what the browser upgrades.

The observer watches childList, subtree, characterData, and attributes (filtered to content and datetime). When a schema property becomes dirty, every indexed entry is re-applied through its binder, so schema writes flow one-way into the view.

The default binders

dataBindBinder collects every [data-bind] element under the component root and writes the named schema property to either element.value (for form controls) or element.textContent (for everything else).

dataBindAttrBinder reads the root's data-bind-attr attribute, splits on whitespace, and forwards each named property onto root.dataset.<propName> so CSS and selectors can react to schema values.

Both binders implement the rules documented on the HTML bindings page — the base class simply runs them inside its own lifecycle.

Mixins

Mixins add behavior to auto-defined components by wrapping the PageloveComponent base class before it is registered. The registry is a module-level array of (selector, mixinFn) pairs.

Stacking order is governed by reduceRight: mixins are applied in reverse registration order, so the earliest-registered mixin sits closest to PageloveComponent and later registrations wrap around it. Each mixin should call super.connectedCallback?.() and super.disconnectedCallback?.().

Built-in mixins

Three mixins ship with the component module and auto-register themselves on import.

Stackable also mirrors its data-z attribute to inline style.zIndex on connection and whenever the attribute changes. This keeps the stacking applied without depending on CSS attr(data-z integer), which Safari does not yet support.

Examples

Minimal custom element from a template

<template itemtype="https://schema.host/StickyNote">
  <sticky-note>
    <h1 data-bind="title" contenteditable></h1>
    <p  data-bind="body"  contenteditable></p>
  </sticky-note>
</template>

The root is hyphenated, so pagelove.mjs defines <sticky-note> as a PageloveComponent subclass. Each stamped instance binds title and body through dataBindBinder.

Draggable, resizable, and stackable without writing any JavaScript

<template itemtype="https://schema.host/StickyNote">
  <sticky-note data-draggable data-resizable data-stackable>
    <h1 data-bind="title" contenteditable></h1>
    <p  data-bind="body"  contenteditable></p>
  </sticky-note>
</template>

All three built-in selectors match the template root, so the auto-definer stacks Draggable, Resizable, and Stackable onto PageloveComponent. Dragging the note commits x and y to the schema; dragging the corner handle commits width and height; clicking the note raises z so it sits above its siblings.

A custom mixin

import { registerComponentMixin } from 'https://pagelove.github.io/beta-js/pagelove/component.mjs';

registerComponentMixin('[data-glow]', (Base) => class extends Base {
  connectedCallback() {
    super.connectedCallback?.();
    this.addEventListener('pointerenter', () => this.classList.add('glowing'));
    this.addEventListener('pointerleave', () => this.classList.remove('glowing'));
  }
  disconnectedCallback() {
    super.disconnectedCallback?.();
    this.classList.remove('glowing');
  }
});

Any template root that matches [data-glow] now gets hover-glow behavior as part of its class chain, provided registration happens before pagelove.mjs discovers templates.

See also

• The Pagelove class — the runtime that discovers templates and calls the component auto-definer.
• HTML bindings — the binding rules implemented by the default dataBindBinder and dataBindAttrBinder.
• Declarative commands — --create-instance and --remove-instance buttons hosted inside template-defined components.

HTMLBaseElement

The interface for <base>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

DOMParser and XMLSerializer

Two globals for moving between HTML strings and DOM: parse a fresh writable document, and serialise any node back to a string.

DOMParser

parseFromString

new DOMParser().parseFromString(html, type) → a writable document. This is the way to build markup to return from a read-only binding context: the parsed document (and everything reached from it) is writable even when the ambient document is not.

Divergence: the type argument is accepted but ignored — input is always parsed as text/html.

export default () => {
  const d = new DOMParser().parseFromString("<ul></ul>", "text/html");
  const li = d.createElement("li");
  li.textContent = "Item";
  d.querySelector("ul").appendChild(li);
  return d.querySelector("ul");   // return an element to splice in
};

XMLSerializer

serializeToString

new XMLSerializer().serializeToString(node) → a string. A document serialises whole; any other node serialises as its outer HTML (a fragment emits just its children).

const html = new XMLSerializer().serializeToString(element);

Serialising is rarely needed inside a binding — returning an element splices it into the page directly (see Returning DOM from a binding). Reach for serializeToString when you need the markup as a string — for example to hash it, store it in an attribute, or compare two subtrees.

See also

• DOM API overview — the read-only boundary and returning DOM
• Document — querying and creating within a parsed document

The Pagelove class

Pagelove is the class that drives declarative HTML apps. Most pages don't construct it explicitly — the library auto-instantiates one on <main> at load time.

When to reach for it

Reach for the constructor directly when an app needs explicit lifecycle control, multiple view roots, commit hooks, a filtered subset of schema instances, or when Pagelove must be driven from application code instead of from the auto-start.

Loading the library

Import the module from wherever it is served:

<script type="module">
  import { Pagelove } from 'https://pagelove.github.io/beta-js/pagelove.mjs';
</script>

Merely loading pagelove.mjs is usually enough — the auto-start handles construction. See the JavaScript overview for the full loading story.

Auto-start

When the module finishes loading, it awaits ready and then checks the document. If the page has a <main> element and no Pagelove instance has been constructed by application code (_instanceCount === 0), the library runs:

document.pagelove = new Pagelove({ view: main });
await document.pagelove.start();

The instance is then reachable as document.pagelove. Auto-start is skipped if there is no <main>, or if any application code has already called new Pagelove(...) before the ready promise resolves.

Constructor

new Pagelove(config)

The single argument is a config object. Every option is read once at construction time.

The most-recently-constructed instance is also assigned to window.pagelove so that PageloveComponent.create can delegate into it.

Methods

start()

await pagelove.start();

Discovers <template itemtype> definitions, awaits the ready promise, performs the first full render, and begins observing the document for changes. Idempotent — calling it on an already-started instance is a no-op. Returns a promise that resolves once observation is in place.

stop()

pagelove.stop();

Disconnects every observer and removes the change, focusout, and input listeners. Use it when tearing down a Pagelove-driven region without unloading the page.

populate(viewEl, schemaId)

pagelove.populate(dialog, 'item-abc123');

Populates the [data-bind] children of viewEl from the schema article whose id is schemaId, and sets viewEl.dataset.for so subsequent commits route back to that article. Use it for dialogs, side panels, or any element outside the main view. The original innerHTML is captured on first call and restored on every subsequent call, so the same element can host different schema articles in turn.

renderAll()

pagelove.renderAll();

Forces a full re-render of the view from the current schema. Existing rendered children of the view (those carrying [data-for]) are removed, and every discovered schema instance is re-stamped through its template. Schema articles that coexist inside the view are preserved.

create(typeUrl, values = {})

const article = pagelove.create('https://schema.host/MoodNote', { mood: 'curious' });

Builds a new <article> element for the named schema type, populated from values and from any defaults declared in the schema definition. The returned article carries itemscope, itemtype, a generated id, and an [itemprop] child for every defined property. Throws if no schema definition has been discovered for typeUrl.

flushPendingPatches()

pagelove.flushPendingPatches();

Applies every patch that was deferred because its target element was focused at the time. Pagelove defers remote patches to focused inputs to avoid clobbering in-flight edits; this method drains the queue on demand.

Properties

hasPendingPatches

Read-only boolean getter. Returns true when at least one remote patch has been deferred and is waiting to be applied. Pair with flushPendingPatches() for explicit drain control.

Module exports

Examples

Explicit instantiation

<main></main>
<aside id="inbox"></aside>

<script type="module">
  import { Pagelove } from 'https://pagelove.github.io/beta-js/pagelove.mjs';

  const pagelove = new Pagelove({
    view: document.querySelector('#inbox'),
    filter: '[data-folder="inbox"]',
  });

  await pagelove.start();
</script>

A second view root is mounted on #inbox, restricted to schema instances tagged with data-folder="inbox". The default auto-start is suppressed because the application constructed an instance before ready resolved.

Intercepting writes with beforeCommit

const pagelove = new Pagelove({
  view: document.querySelector('main'),
  beforeCommit(schemaEl, prop, value) {
    if (prop === 'title' && value.trim() === '') {
      return false; // reject empty titles
    }
    return true;
  },
  afterCommit(schemaEl, prop, value) {
    console.log('committed', schemaEl.id, prop, value);
  },
});

await pagelove.start();

beforeCommit runs against every prospective write. Returning false cancels the commit; returning anything truthy lets it proceed and triggers afterCommit once the write succeeds.

See also

• HTML bindings
• Declarative commands
• Web Components
• Schema instances in HTML

HTMLBodyElement

The interface for <body>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

Server-Sent Events

PageloveSSE is the live mutation streaming client: it opens a Server-Sent Events connection to a document, parses incoming HTML Microdata mutation events, applies them to the live DOM, and re-dispatches them as cancelable custom events on document.

When to reach for it

Reach for it when a view should update in real time as the underlying document changes — collaborative editing, live dashboards, multi-tab synchronization — without polling. For the default case, no application code is required at all: importing the module is enough.

Loading the library

Add the module to the page:

<script type="module" src="https://pagelove.github.io/beta-js/pagelove/sse.mjs"></script>

Importing pagelove/sse.mjs auto-instantiates one PageloveSSE subscribed to the current page URL. The default instance is held internally and begins streaming as soon as the module evaluates. Application code is only needed when subscribing to a different URL or when intercepting events.

The PageloveSSE class

import { PageloveSSE } from 'https://pagelove.github.io/beta-js/pagelove/sse.mjs';

Constructors

The constructor opens the underlying EventSource immediately, with withCredentials: true so cookies and authorization travel with the request.

Methods

Properties

Static methods

DOM mutations

When a mutation event arrives, PageloveSSE locates the target with the carried CSS selector and applies the change:

If no element matches the selector, the event is silently dropped. Mutations that echo a local write (matched against the pending PLMethodStarted queue) are recognized as echoes and the DOM step is skipped — the local change already produced the result.

This local echo check only reconciles the same tab's own optimistic write against the mutation event that write eventually produces — it does not affect which events the server delivers. PageloveSSE connects with a plain EventSource and does not currently read the server-assigned connection token or send it back on writes (see Echo suppression), so the server falls back to its session-based suppression: a write from one browser tab is not delivered live to another tab of the same session, since same-origin tabs share the session cookie. Each tab only ever sees its own writes reflected through this local echo-matching step, not through the SSE stream. If your application needs one tab to see another same-session tab's live writes, subscribe with your own EventSource, listen for the pagelove-connection event to capture the server-assigned token, and send it back as a Pagelove-Connection header on every mutating request from that tab, as described in that section, rather than relying on the default PageloveSSE connection.

Events on document

Three custom events are dispatched on document. All three bubble and are composed.

PLMutation detail fields:

Listening for events

document.addEventListener('PLMutation', (event) => {
  const { method, selector, element } = event.detail;
  console.log(`incoming ${method} ${selector}`);
  // event.preventDefault(); // would skip the DOM change
});

PLMutationApplied follows the same shape and fires after the change has landed. PLStreamReset carries event.detail.reason; calling preventDefault() cancels the automatic reload.

Focus protection

Focus protection — deferring incoming changes that target the currently focused element until focus leaves — is not implemented in pagelove/sse.mjs. It lives in the Pagelove class, which observes the schema, queues patches against focused inputs, and exposes flushPendingPatches() and hasPendingPatches for explicit control.

Examples

Default — include the script

<script type="module" src="https://pagelove.github.io/beta-js/pagelove/sse.mjs"></script>

The page is now live. Any mutation the server streams for this URL is applied to the DOM as it arrives.

Manual subscription to a different URL

<script type="module">
  import { PageloveSSE } from 'https://pagelove.github.io/beta-js/pagelove/sse.mjs';

  const sidebar = new PageloveSSE('/sidebar.html');

  document.addEventListener('PLMutationApplied', (event) => {
    if (event.detail.path === '/sidebar.html') {
      console.log('sidebar updated', event.detail.selector);
    }
  });

  // Later, when the sidebar is dismissed:
  // sidebar.close();
</script>

A second subscription is opened against /sidebar.html alongside the auto-instantiated default. Both feed events to the same document listeners; consumers distinguish them by event.detail.path.

See also

• The Pagelove class — focus-aware patch queueing and the rest of the runtime.
• Server-Sent Events (HTTP reference) — the wire protocol that PageloveSSE consumes.

DOMException

Every error thrown by the DOM API — a guarded mutation on a read-only document, an invalid selector, a hierarchy violation — is a DOMException instance. The constructor is also available directly, for a binding that wants to raise its own DOM-shaped error.

Constructor

new DOMException(message?, name?)

throw new DOMException("no matching element", "NotFoundError");

Members

toString

toString() → "DOMException: <name>", or "DOMException: <name>: <message>" when message is non-empty.

try {
  card.setAttribute("id", "x");   // card is read-only
} catch (e) {
  e instanceof DOMException;   // true
  e.name;                      // "NoModificationAllowedError"
  e.code;                      // 7
  e.toString();                // "DOMException: NoModificationAllowedError: document is read-only in this binding context"
}

Name and legacy code

code reflects the Web IDL legacy error code for the recognised name values:

Any other name (including the default "Error") yields code === 0.

Names raised by this API

The DOM API overview lists the specific name values this implementation actually throws — SyntaxError, HierarchyRequestError, NotFoundError, NamespaceError, and NoModificationAllowedError — and the conditions that raise each one.

See also

• JavaScript DOM API — which names this API raises, and when
• Node — the tree mutations that are guarded on a read-only document

HTMLButtonElement

The interface for <button>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

Primitives

pagelove/primitives.mjs is the low-level HTTP client that pagelove.mjs uses internally. Most apps do not touch it directly.

When to reach for it

• Tooling that talks to Pagelove without rendering a page.
• Scripts that issue requests outside the declarative binding flow.
• Custom integrations where full control over the request lifecycle is needed.

For everything else, use the Pagelove class and the declarative flow on top.

Loading the library

<script type="module">
  import { PLDocument, PLElement } from 'https://pagelove.github.io/beta-js/pagelove/primitives.mjs';
</script>

The module exports two classes: PLDocument and PLElement.

The PLDocument class

A PLDocument represents a Pagelove resource URL and the live DOM associated with it.

Constructor

Methods

Properties

A PLDocument bound to a live Document stores a WeakRef to itself on document.pagelove and installs listeners for PLCapability and PLMethodCompleted.

The PLElement class

A PLElement wraps a single DOM node and knows how to issue HTTP requests scoped to that node.

Constructor

Methods

Properties

OPTIONS lives on PLDocument, not PLElement — discovery is document-level.

Attached methods on DOM elements

PLDocument listens for PLCapability events on its bound document. The event payload looks like:

{
  selector: '<css selector>',
  allow: ['GET', 'PUT', 'POST', 'DELETE']
}

For each method named in allow, the document constructs a PLElement for the event target and attaches the matching method directly to the DOM node as a non-writable, configurable property:

Object.defineProperty(target, 'PUT', { value: plElement.PUT.bind(plElement), ... });

After the flow has run, element.GET(), element.PUT(body), element.POST(body), and element.DELETE() are callable on the DOM node itself with no further imports. Only methods the server has authorized appear.

ETag handling

ETags are loaded lazily, only for elements that need them.

• When a PLCapability event arrives for an element with an id and etag === undefined, PLDocument registers the element with a shared IntersectionObserver (rootMargin: '200px').
• When the element scrolls into view, the observer issues a HEAD request with Range: selector=<element selector> and stashes the response's ETag header on the element as element.etag.
• Successful method requests also update element.etag from the response's ETag header. After a POST, the parent's previous ETag is restored and the response ETag is assigned to the new child instead.

Request format

Every request a PLElement issues is built by req(method, opts):

Everything else is a standard fetch() Request. Each request also dispatches PLMethodStarted before sending and PLMethodCompleted after the response arrives. Both events bubble and carry { method, selector }; PLMethodCompleted additionally carries response.

Examples

Calling an attached method

<script type="module">
  import { PLDocument } from 'https://pagelove.github.io/beta-js/pagelove/primitives.mjs';

  const doc = new PLDocument();
  await doc.OPTIONS();

  document.addEventListener('click', async (event) => {
    const card = event.target.closest('article.note');
    if (card && typeof card.DELETE === 'function') {
      await card.DELETE();
    }
  });
</script>

Once OPTIONS() has run, any matching <article class="note"> exposes the methods the server allows.

Manual PLDocument and PLElement

<script type="module">
  import { PLDocument } from 'https://pagelove.github.io/beta-js/pagelove/primitives.mjs';

  const doc = new PLDocument('/notes.html');
  const target = document.getElementById('note-42');

  const note = await doc.createElement(target);
  await note.PUT('<article id="note-42">Edited</article>');
</script>

The wrapper is constructed by hand and no capability discovery is required. Range: selector=#note-42 is generated from the element's id; If-Match is added automatically once note.element.etag is populated.

See also

• The Pagelove class — the high-level API that sits on top of primitives.
• OPTIONS method — the multipart capability discovery mechanism OPTIONS() consumes.
• PUT method — the Range: selector=... and If-Match headers in detail.

HTMLCanvasElement

The interface for <canvas>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

Debug channels

pagelove/debug.mjs provides bitwise debug channels for module-level console logging. Channels can be toggled at runtime from devtools and persist across page reloads.

When to reach for it

Reach for it to diagnose problems with SSE mutation streaming, HTTP requests and method attachment, or schema discovery and template registration. Each channel gates logs for one area of the system. Enable channels from devtools without reloading, set a breakpoint, and observe which channel is running.

Channels

The module exports four channel constants. Enable channels by bitwise OR:

Enabling and disabling channels

Enable or disable channels with the Pagelove.debug getter/setter. To enable the SSE channel:

Pagelove.debug |= Pagelove.SSE;

Enable multiple channels at once:

Pagelove.debug = Pagelove.SSE | Pagelove.PRIMITIVES;

Enable everything:

Pagelove.debug = Pagelove.ALL;

Silence all channels:

Pagelove.debug = 0;

The mask is treated as an integer. Setting debug to a non-integer value is coerced to an int via bitwise OR with zero.

Persistence

The active channel mask is stored in localStorage.pagelove_debug when available. The mask restores automatically when the module loads, so debug settings survive page reloads and browser restarts. If localStorage is unavailable — such as in private browsing mode with storage disabled — persistence is silently skipped and the mask starts at 0.

Logging methods

Three methods gate console output against the active channel mask:

The first argument is always the channel constant; remaining arguments are passed to the console method unchanged.

Global exposure

When loaded in a browser, the module assigns itself to window.Pagelove so the debug mask can be toggled from devtools without requiring an import statement.

Examples

Turning on SSE logging from devtools

In the browser console:

Pagelove.debug |= Pagelove.SSE;

All log, warn, and error calls gated on Pagelove.SSE now appear in the console. Reload the page and the setting persists.

Logging from application code

Application modules can participate in the same gating:

import { Pagelove } from 'https://pagelove.github.io/beta-js/pagelove/debug.mjs';

function handleSSEEvent(event) {
  Pagelove.log(Pagelove.SSE, '[my-feature]', 'event received', event);
}

The log only appears when the SSE channel is enabled via Pagelove.debug |= Pagelove.SSE.

See also

• Server-Sent Events — mutation streaming and reconnection.
• Primitives — the low-level HTTP client and method attachment.
• The Pagelove class — the high-level API and schema discovery.

HTMLDListElement

The interface for <dl>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDataElement

The interface for <data>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDataListElement

The interface for <datalist>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDetailsElement

The interface for <details>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDialogElement

The interface for <dialog>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDirectoryElement

The interface for <dir>. Extends HTMLElement → Element.

Deprecated. HTMLDirectoryElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLDivElement

The interface for <div>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLElement

The base interface for every HTML element. A tag with no more specific interface below is a plain HTMLElement. Extends Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLEmbedElement

The interface for <embed>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLFieldSetElement

The interface for <fieldset>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLFontElement

The interface for <font>. Extends HTMLElement → Element.

Deprecated. HTMLFontElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLFormElement

The interface for <form>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLFrameElement

The interface for <frame>. Extends HTMLElement → Element.

Deprecated. HTMLFrameElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLFrameSetElement

The interface for <frameset>. Extends HTMLElement → Element.

Deprecated. HTMLFrameSetElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLHRElement

The interface for <hr>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLHeadElement

The interface for <head>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLHeadingElement

The interface shared by <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLHtmlElement

The interface for <html>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLIFrameElement

The interface for <iframe>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLImageElement

The interface for <img>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLInputElement

The interface for <input>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLLIElement

The interface for <li>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLLabelElement

The interface for <label>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLLegendElement

The interface for <legend>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLLinkElement

The interface for <link>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMapElement

The interface for <map>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMarqueeElement

The interface for <marquee>. Extends HTMLElement → Element.

Deprecated. HTMLMarqueeElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMediaElement

An abstract interface — no tag creates one directly. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMenuElement

The interface for <menu>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMetaElement

The interface for <meta>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLMeterElement

The interface for <meter>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLModElement

The interface shared by <ins>, <del>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLOListElement

The interface for <ol>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLObjectElement

The interface for <object>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLOptGroupElement

The interface for <optgroup>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLOptionElement

The interface for <option>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLOutputElement

The interface for <output>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLParagraphElement

The interface for <p>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLParamElement

The interface for <param>. Extends HTMLElement → Element.

Deprecated. HTMLParamElement covers an obsolete element (WHATWG HTML §16.3 "Other elements, attributes and APIs"); it exists only for instanceof / constructor.name fidelity and content-attribute reflection, not for use in new content.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLPictureElement

The interface for <picture>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLPreElement

The interface for <pre>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLProgressElement

The interface for <progress>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLQuoteElement

The interface shared by <blockquote>, <q>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLScriptElement

The interface for <script>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLSelectElement

The interface for <select>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLSlotElement

The interface for <slot>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLSourceElement

The interface for <source>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLSpanElement

The interface for <span>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLStyleElement

The interface for <style>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableCaptionElement

The interface for <caption>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableCellElement

The interface shared by <td>, <th>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableColElement

The interface shared by <col>, <colgroup>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableElement

The interface for <table>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableRowElement

The interface for <tr>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTableSectionElement

The interface shared by <thead>, <tbody>, <tfoot>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTemplateElement

The interface for <template>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTextAreaElement

The interface for <textarea>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTimeElement

The interface for <time>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTitleElement

The interface for <title>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLTrackElement

The interface for <track>. Extends HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLUListElement

The interface for <ul>. Extends HTMLElement → Element.

No interface-specific reflected properties — every member comes from HTMLElement and Element. Use getAttribute / setAttribute for any other attribute.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLElement — the global reflected properties every HTML element inherits
• JavaScript DOM API — the interface hierarchy and instanceof

HTMLVideoElement

The interface for <video>. Extends HTMLMediaElement → HTMLElement → Element.

Reflected properties

All setters are guarded and throw NoModificationAllowedError on a read-only document.

See also

• Element — getAttribute/setAttribute, content, classList, traversal, insertion
• HTMLMediaElement — inherited reflected properties
• JavaScript DOM API — the interface hierarchy and instanceof