@abide/abide 0.111.0 → 0.113.0

package/src/ui/bindGroup.ts

@@ -0,0 +1,41 @@
+import {
+    boundValue,
+    groupHolds,
+    heldValue,
+    writeBound,
+} from '#shared/boundValue.ts'
+import type { Scope } from './Scope.ts'
+
+/**
+ * Keeps a radio or checkbox's `checked` in step with a `bind:group` value, both ways.
+ *
+ * 32.8 — COMPARED AGAINST THE INPUT'S OWN VALUE, read through `own` — the `value` attribute's
+ * expression, or its static text, or `on` where it has none — rather than off the element: a
+ * `value={option.id}` that moves reruns the compare, and a number stays a number in the group
+ * where the element's `value` property would have handed back its text.
+ */
+export function bindGroup(
+    element: Element,
+    operand: unknown,
+    own: () => unknown,
+    scope: Scope,
+): void {
+    const bound = element as HTMLInputElement
+    scope.watch(() => {
+        const checked = groupHolds(boundValue(operand), own())
+        bound.checked = checked
+        bound.toggleAttribute('checked', checked)
+    })
+    bound.addEventListener('change', () => {
+        const value = own()
+        const standing = heldValue(operand)
+        // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
+        if (Array.isArray(standing)) {
+            const next: unknown[] = []
+            for (const member of standing)
+                if (member !== value) next.push(member)
+            if (bound.checked) next.push(value)
+            writeBound(operand, next)
+        } else if (bound.checked) writeBound(operand, value)
+    })
+}

package/src/ui/bindProperty.ts

@@ -8,7 +8,6 @@
 
 import {
     boundValue,
-    groupHolds,
     heldValue,
     selectHolds,
     writeBound,
@@ -20,7 +19,7 @@ type Bound = HTMLInputElement & HTMLDetailsElement
 
 export function bindProperty(
     element: Element,
-    kind: 'value' | 'checked' | 'open' | 'group',
+    kind: 'value' | 'checked' | 'open',
     operand: unknown,
     scope: Scope,
 ): void {
@@ -29,25 +28,6 @@ export function bindProperty(
         bindValue(bound, operand, scope)
         return
     }
-    if (kind === 'group') {
-        scope.watch(() => {
-            const checked = groupHolds(boundValue(operand), bound.value)
-            bound.checked = checked
-            bound.toggleAttribute('checked', checked)
-        })
-        bound.addEventListener('change', () => {
-            const standing = heldValue(operand)
-            // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
-            if (Array.isArray(standing)) {
-                const next: unknown[] = []
-                for (const member of standing)
-                    if (member !== bound.value) next.push(member)
-                if (bound.checked) next.push(bound.value)
-                writeBound(operand, next)
-            } else if (bound.checked) writeBound(operand, bound.value)
-        })
-        return
-    }
     // `checked` on an input, `open` on a `<details>`.
     const property = kind
     scope.watch(() => {

package/src/ui/bindSpread.ts

@@ -4,6 +4,7 @@
 
 import { spreadEntries } from '#shared/spread.ts'
 import type { Scope } from './Scope.ts'
+import { addAttribute } from './setAttribute.ts'
 
 /** Keeps an element's spread attributes and `on<event>` listeners written as the value changes. */
 export function bindSpread(
@@ -19,8 +20,9 @@ export function bindSpread(
         const next = new Set<string>()
         for (const [name, text] of spreadEntries(read(), explicit, wanted)) {
             next.add(name)
-            if (element.getAttribute(name) !== text)
-                element.setAttribute(name, text)
+            const standing = element.getAttribute(name)
+            if (standing === null) addAttribute(element, name, text)
+            else if (standing !== text) element.setAttribute(name, text)
         }
         for (const name of written)
             if (!next.has(name)) element.removeAttribute(name)

package/src/ui/index.ts

@@ -15,6 +15,8 @@
 // and every `class:name` on an element is merged by the server into the single `style` or `class`
 // attribute beside the author's own, so neither of those two attributes can be written back whole
 // — the CSSOM and `classList` are what touch the one declaration or the one token a binding owns.
+// A `class={expr}` or `style={expr}` beside its directives is the same answer once more
+// (`setClassGroup`, `setStyleGroup`, 32.71): the group writes what it owns, and nothing else.
 // A list is reached through `listAt` and `updateList` alone, so its rows' shape is no caller's.
 // Nothing that finds a node by something added to the document, because a compiler may not invent
 // structure an author's CSS or queries can see.
@@ -37,10 +39,8 @@ export {
     runHere,
     textHere,
 } from './adoptWalk.ts'
-// 39.6 — a module mounted into an empty region applies its own head, from inside its instance
-// (`emitClient`); only a module that carries its own markup and a `<head>` imports it.
-export { applyHead } from './applyHead.ts'
 export { bindElement } from './bindElement.ts'
+export { bindGroup } from './bindGroup.ts'
 export { bindProperty } from './bindProperty.ts'
 export { bindSpread } from './bindSpread.ts'
 export { escapeless } from './escapeless.ts'
@@ -48,7 +48,7 @@ export { escapeless } from './escapeless.ts'
 export { contributeHead } from './Level.ts'
 export { listAt, updateList } from './List.ts'
 export { warnMismatch } from './Mismatch.ts'
-export { markupNodes } from './parseMarkup.ts'
+export { markupNodes, namespaceUnder } from './parseMarkup.ts'
 export {
     fillEmpty,
     fillRegion,
@@ -58,9 +58,11 @@ export {
 export { rowKeyOf } from './rowKeyOf.ts'
 export { itemOf, noUpdate, replaceRow, rowCell } from './rows.ts'
 export { EMPTY_SCOPE, Scope } from './Scope.ts'
-export { setAttribute } from './setAttribute.ts'
+export { addAttribute, setAttribute } from './setAttribute.ts'
 export { setClass } from './setClass.ts'
+export { setClassGroup } from './setClassGroup.ts'
 export { setMarkup } from './setMarkup.ts'
+export { setStyleGroup } from './setStyleGroup.ts'
 export { setStyleProperty } from './setStyleProperty.ts'
 export { setText } from './setText.ts'
 export { TryRegion } from './TryRegion.ts'

package/src/ui/parseMarkup.ts

@@ -1,3 +1,8 @@
+import {
+    HTML_NAMESPACE,
+    INTEGRATION_POINTS,
+} from '#shared/INTEGRATION_POINTS.ts'
+
 // MARKUP PARSED IN THE DOCUMENT `parent` BELONGS TO, not the global one. A page mounted into a second
 // document (an example `<iframe>`) parsed its `{#if}` arms in the right one and its `{#for}` rows in
 // the page's while the two were separate copies of this; one copy is one answer.
@@ -9,26 +14,22 @@ const TEMPLATES = new WeakMap<Document, HTMLTemplateElement>()
 const SVG = 'http://www.w3.org/2000/svg'
 const MATHML = 'http://www.w3.org/1998/Math/MathML'
 
-// The foreign elements whose children the parser reads as HTML again — the integration points —
-// so markup going into one parses the way it would at the template's own top level.
-const INTEGRATION_POINTS = new Set([
-    'foreignObject',
-    'desc',
-    'title',
-    'mi',
-    'mo',
-    'mn',
-    'ms',
-    'mtext',
-])
-
-/** Whether the parser reads `element`'s children as HTML again, though it is SVG or MathML. */
-function isIntegrationPoint(element: Element): boolean {
-    if (INTEGRATION_POINTS.has(element.localName)) return true
+/**
+ * The namespace an element the parser makes inside `parent` takes: SVG's or MathML's under an
+ * element of either, and HTML's under anything else — an HTML element, a document, a fragment, and
+ * an integration point (`INTEGRATION_POINTS`), whose children the parser reads as HTML again.
+ */
+export function namespaceUnder(parent: Node): string {
+    const element = parent as Element
+    const space = element.namespaceURI
+    if (space !== SVG && space !== MATHML) return HTML_NAMESPACE
+    if (INTEGRATION_POINTS.has(element.localName)) return HTML_NAMESPACE
     // The HTML standard makes an `<annotation-xml>` one only by the encoding it declares.
-    if (element.localName !== 'annotation-xml') return false
+    if (element.localName !== 'annotation-xml') return space
     const encoding = element.getAttribute('encoding')?.toLowerCase()
     return encoding === 'text/html' || encoding === 'application/xhtml+xml'
+        ? HTML_NAMESPACE
+        : space
 }
 
 /**
@@ -48,14 +49,8 @@ export function parseMarkup(parent: Node, markup: string): DocumentFragment {
         template = document.createElement('template')
         TEMPLATES.set(document, template)
     }
-    const space = (parent as Element).namespaceURI
-    const wrapper =
-        (space !== SVG && space !== MATHML) ||
-        isIntegrationPoint(parent as Element)
-            ? undefined
-            : space === SVG
-              ? 'svg'
-              : 'math'
+    const space = namespaceUnder(parent)
+    const wrapper = space === HTML_NAMESPACE ? undefined : space === SVG ? 'svg' : 'math'
     if (wrapper === undefined) {
         template.innerHTML = markup
         return template.content

package/src/ui/reconcileHead.ts

@@ -0,0 +1,215 @@
+// 39.4–39.6, 39.13–39.17 — THE DOCUMENT HEAD HAS ONE WRITER. Every routed level and every component
+// with a `<head>` is a contributor, and the head is reconciled from all of them at once, in the
+// chain's order — each level's own head, then its components' in the order they mounted — rather
+// than patched by each with what it can learn of the others.
+//
+// A KEY IS WON BY THE LAST CONTRIBUTOR HOLDING IT (39.4), and one nobody holds any more leaves or
+// goes back to whoever still does (39.14) because that is what the chain now says. A KEYLESS NODE
+// IS ITS CONTRIBUTOR'S, held by reference (39.5, 39.15, 39.16): two contributors writing the same
+// `<style>` each own their own, and one leaving takes its own with it — told apart by where they
+// stand, never by being equal.
+//
+// NOTHING IS ADDED TO MARK OWNERSHIP, and nothing a contributor did not write is touched: a node the
+// server painted is ADOPTED the first time its contributor is reconciled, matched in chain order.
+
+import { headKeyOf } from '#shared/headKeyOf.ts'
+import { markupNodes } from './parseMarkup.ts'
+
+/** One contributor's head, parsed once per text it reads. */
+type Parsed = { text: string; keyed: Map<string, Element>; keyless: Node[] }
+
+const parsedBy = new WeakMap<object, Parsed>()
+/** The keyless nodes standing in the head for each contributor, in its order. */
+const ownedBy = new Map<object, Node[]>()
+/**
+ * The element standing for each key the chain held at the last reconcile, so one it drops is
+ * withdrawn — that element, and never another holding the same key that nothing here wrote.
+ */
+const keyedNodes = new Map<string, Element>()
+
+/** Whether `who` has been reconciled — adopted or written — since it joined. */
+export function reconciled(who: object): boolean {
+    return ownedBy.has(who)
+}
+
+/**
+ * Writes the head the chain contributes: `chain` is every contributor and the head it reads now,
+ * outermost first.
+ *
+ * Only what moved is written. A key standing as it is wanted, and a keyless node equal to the one
+ * its contributor wants there, are left standing — a `<link rel=stylesheet>` put back as itself is
+ * refetched and flashes the page unstyled, and a `<script>` would run again.
+ */
+export function reconcileHead(
+    chain: readonly (readonly [who: object, text: string])[],
+): void {
+    const head = document.head
+    const present = new Set<object>()
+    const wanted = new Map<string, Element>()
+    for (const [who, text] of chain) {
+        present.add(who)
+        for (const [key, element] of parsedOf(head, who, text).keyed)
+            wanted.set(key, element)
+    }
+    const standing = standingKeys(head)
+    for (const [key, node] of keyedNodes)
+        if (!wanted.has(key)) {
+            node.remove()
+            keyedNodes.delete(key)
+        }
+    for (const [key, element] of wanted) {
+        let at = standing.get(key)
+        if (at === undefined) {
+            at = element.cloneNode(true) as Element
+            head.appendChild(at)
+        } else if (at.outerHTML !== element.outerHTML) {
+            const next = element.cloneNode(true) as Element
+            head.replaceChild(next, at)
+            at = next
+        }
+        keyedNodes.set(key, at)
+    }
+
+    for (const [who, nodes] of ownedBy)
+        if (!present.has(who)) {
+            for (const node of nodes) node.parentNode?.removeChild(node)
+            ownedBy.delete(who)
+        }
+    const claimed = new Set<Node>()
+    for (const nodes of ownedBy.values())
+        for (const node of nodes) claimed.add(node)
+    let previous: Node | null = null
+    for (let at = 0; at < chain.length; at += 1) {
+        const who = (chain[at] as readonly [object, string])[0]
+        const wants = (parsedBy.get(who) as Parsed).keyless
+        const owned = ownedBy.get(who) ?? adopt(head, wants, claimed)
+        const next: Node[] = []
+        for (let index = 0; index < wants.length; index += 1) {
+            const want = wants[index] as Node
+            const have = owned[index]
+            let node: Node
+            if (have?.isEqualNode(want) === true) node = have as Node
+            else {
+                node = runnable(want.cloneNode(true))
+                if (have !== undefined) head.replaceChild(node, have)
+                else
+                    head.insertBefore(
+                        node,
+                        previous === null
+                            ? firstOwnedAfter(chain, at)
+                            : previous.nextSibling,
+                    )
+            }
+            next.push(node)
+            previous = node
+        }
+        for (let index = wants.length; index < owned.length; index += 1)
+            (owned[index] as Node).parentNode?.removeChild(owned[index] as Node)
+        ownedBy.set(who, next)
+    }
+}
+
+/** `who`'s head parsed, from the cache while it reads the same text. */
+function parsedOf(head: HTMLHeadElement, who: object, text: string): Parsed {
+    const cached = parsedBy.get(who)
+    if (cached !== undefined && cached.text === text) return cached
+    const parsed: Parsed = { text, keyed: new Map(), keyless: [] }
+    for (const node of markupNodes(head, text)) {
+        const key = node.nodeType === 1 ? headKey(node as Element) : undefined
+        if (key === undefined) parsed.keyless.push(node)
+        else parsed.keyed.set(key, node as Element)
+    }
+    parsedBy.set(who, parsed)
+    return parsed
+}
+
+/**
+ * The nodes the server painted for a contributor reconciled for the first time: each one it wants,
+ * the first equal node nobody has claimed, in order. Contributors are adopted in the chain's
+ * order, which is the order the server painted them in, so an earlier one claims the earlier of
+ * two equal nodes.
+ */
+function adopt(
+    head: HTMLHeadElement,
+    wants: Node[],
+    claimed: Set<Node>,
+): Node[] {
+    const adopted: Node[] = []
+    let from = head.firstChild
+    for (const want of wants) {
+        let found: Node | null = null
+        for (let at = from; at !== null; at = at.nextSibling)
+            if (!claimed.has(at) && at.isEqualNode(want)) {
+                found = at
+                break
+            }
+        if (found === null) break
+        claimed.add(found)
+        adopted.push(found)
+        from = found.nextSibling
+    }
+    return adopted
+}
+
+/** The first keyless node a contributor after `at` owns, which a new one goes before. */
+function firstOwnedAfter(
+    chain: readonly (readonly [object, string])[],
+    at: number,
+): Node | null {
+    for (let later = at + 1; later < chain.length; later += 1) {
+        const owned = ownedBy.get(
+            (chain[later] as readonly [object, string])[0],
+        )
+        if (owned !== undefined && owned.length > 0) return owned[0] as Node
+    }
+    return null
+}
+
+/**
+ * `node`, or — for a `<script>` — the same script made by the document rather than the parser.
+ *
+ * 39.17 — A PARSED SCRIPT NEVER RUNS. The fragment parser marks every `<script>` it makes "already
+ * started", and a clone keeps the mark, so a script it made and then moved into the head is inert
+ * where the server's, made by the document's own parser, ran. One made by `createElement` starts
+ * clear and runs on insertion. Keyless always (39.11 keys no `<script>`).
+ */
+function runnable(node: Node): Node {
+    if (node.nodeName !== 'SCRIPT') return node
+    const parsed = node as HTMLScriptElement
+    const script = document.createElement('script')
+    const attributes = parsed.attributes
+    for (let index = 0; index < attributes.length; index += 1) {
+        const attribute = attributes[index] as Attr
+        script.setAttribute(attribute.name, attribute.value)
+    }
+    script.text = parsed.text
+    return script
+}
+
+/**
+ * The head's keyed elements by key, the first holding each — 39.12 within the standing head: the
+ * FIRST element holding a key is the one a contribution replaces.
+ */
+function standingKeys(head: HTMLHeadElement): Map<string, Element> {
+    const standingByKey = new Map<string, Element>()
+    for (
+        let node = head.firstElementChild;
+        node !== null;
+        node = node.nextElementSibling
+    ) {
+        const key = headKey(node)
+        if (key !== undefined && !standingByKey.has(key))
+            standingByKey.set(key, node)
+    }
+    return standingByKey
+}
+
+/**
+ * The key a head element replaces by, or `undefined` for one that appends — 39.11 through the one
+ * grammar (`headKeyOf`), asked with a resolved attribute.
+ */
+function headKey(element: Element): string | undefined {
+    return headKeyOf(element.tagName.toLowerCase(), (name) =>
+        element.getAttribute(name),
+    )
+}

package/src/ui/setAttribute.ts

@@ -1,4 +1,6 @@
 import { attributeText } from '#shared/attributeText.ts'
+import { FOREIGN_ATTRIBUTES } from '#shared/FOREIGN_ATTRIBUTES.ts'
+import { HTML_NAMESPACE } from '#shared/INTEGRATION_POINTS.ts'
 import { WORK } from '#shared/WORK.ts'
 
 /**
@@ -33,5 +35,27 @@ export function setAttribute(
         if (element.hasAttribute(name)) element.removeAttribute(name)
         return
     }
-    if (element.getAttribute(name) !== next) element.setAttribute(name, next)
+    const standing = element.getAttribute(name)
+    if (standing === next) return
+    if (standing === null) addAttribute(element, name, next)
+    else element.setAttribute(name, next)
+}
+
+/**
+ * Writes an attribute `element` does not hold yet, in the namespace the parser gives it there.
+ *
+ * 32.70 — an `xlink:href` on an SVG element is XLink's (`FOREIGN_ATTRIBUTES`), and one
+ * `setAttribute` makes has none, so a `<use>` it names draws nothing. Only an attribute's CREATION
+ * decides its namespace: `setAttribute` and `getAttribute` find a standing one by its qualified
+ * name, whatever namespace it is in.
+ */
+export function addAttribute(
+    element: Element,
+    name: string,
+    text: string,
+): void {
+    const space = FOREIGN_ATTRIBUTES.get(name)
+    if (space === undefined || element.namespaceURI === HTML_NAMESPACE)
+        element.setAttribute(name, text)
+    else element.setAttributeNS(space, name, text)
 }

package/src/ui/setClassGroup.ts

@@ -0,0 +1,79 @@
+import { ASCII_WHITESPACE } from '#shared/ASCII_WHITESPACE.ts'
+import { textOf } from '#shared/Raw.ts'
+import { WORK } from '#shared/WORK.ts'
+
+/**
+ * 32.71 — what a `class={expr}` and the `class:name` directives beside it last wrote, as one
+ * group: the attribute's text and tokens, and the directives' conditions in the order `names`
+ * gives them.
+ *
+ * KEYED BY ELEMENT rather than declared by the mount, because a row's `update` writes the same
+ * element from a function of its own and both have to read one record.
+ */
+const owned = new WeakMap<
+    Element,
+    {
+        text: string | undefined
+        tokens: ReadonlySet<string>
+        conditions: readonly unknown[] | undefined
+        names: string[]
+    }
+>()
+
+// Every record's tokens until its `class` is first written, which replaces the set.
+const NO_TOKENS: ReadonlySet<string> = new Set()
+
+/**
+ * Writes a `class={expr}` and the `class:name` directives beside it as one group, through
+ * `classList`: `plain` is the attribute's value, and `conditions` each directive's, in the order
+ * of `names`, its classes space-separated.
+ *
+ * 32.71 — ONLY ITS OWN CLASSES, and only what moved: the attribute's tokens are re-split only when
+ * its text changed, a token it dropped comes off unless a directive holds it, and a directive is
+ * written only when its condition flipped, kept on while the attribute holds its class. Every
+ * write is guarded by `contains`, so the first run over a served page writes nothing.
+ */
+export function setClassGroup(
+    element: Element,
+    names: string,
+    plain: unknown,
+    conditions: readonly unknown[],
+): void {
+    WORK.bindingRuns += 1
+    let held = owned.get(element)
+    if (held === undefined) {
+        held = {
+            text: undefined,
+            tokens: NO_TOKENS,
+            conditions: undefined,
+            names: names.split(' '),
+        }
+        owned.set(element, held)
+    }
+    const classes = element.classList
+    const text = textOf(plain)
+    const was = held.conditions
+    if (text !== held.text) {
+        const next = new Set<string>()
+        for (const token of text.split(ASCII_WHITESPACE))
+            if (token !== '') next.add(token)
+        for (const token of held.tokens) {
+            if (next.has(token)) continue
+            const at = held.names.indexOf(token)
+            if (at !== -1 && conditions[at]) continue
+            if (classes.contains(token)) classes.remove(token)
+        }
+        for (const token of next)
+            if (!classes.contains(token)) classes.add(token)
+        held.text = text
+        held.tokens = next
+    }
+    for (let at = 0; at < held.names.length; at += 1) {
+        const on = Boolean(conditions[at])
+        if (was !== undefined && Boolean(was[at]) === on) continue
+        const name = held.names[at] as string
+        const wanted = on || held.tokens.has(name)
+        if (classes.contains(name) !== wanted) classes.toggle(name, wanted)
+    }
+    held.conditions = conditions
+}

package/src/ui/setStyleGroup.ts

@@ -0,0 +1,130 @@
+import { oneStyleValue } from '#shared/escapeText.ts'
+import { textOf } from '#shared/Raw.ts'
+import { WORK } from '#shared/WORK.ts'
+
+/**
+ * 32.71 — what a `style={expr}` and the `style:prop` directives beside it last wrote, as one
+ * group: the attribute's text, its declarations once they have been needed, and the directives'
+ * values in the order `names` gives them.
+ *
+ * KEYED BY ELEMENT rather than declared by the mount, because a row's `update` writes the same
+ * element from a function of its own and both have to read one record.
+ */
+const owned = new WeakMap<
+    Element,
+    {
+        text: string | undefined
+        declared: Map<string, [value: string, priority: string]> | undefined
+        values: readonly unknown[] | undefined
+        names: string[]
+    }
+>()
+
+// THE PARSE IS THE BROWSER'S OWN: a declaration list is not split on `;` by hand, since one can sit
+// inside `url()` or a string. A detached element's style is parsed and never laid out.
+let parsed: CSSStyleDeclaration | undefined
+
+/** A declaration list's properties, values and priorities, as the browser parses it. */
+function declarationsOf(
+    text: string,
+): Map<string, [value: string, priority: string]> {
+    parsed ??= document.createElement('div').style
+    parsed.cssText = text
+    const declared = new Map<string, [value: string, priority: string]>()
+    for (let index = 0; index < parsed.length; index += 1) {
+        const property = parsed.item(index)
+        declared.set(property, [
+            parsed.getPropertyValue(property),
+            parsed.getPropertyPriority(property),
+        ])
+    }
+    return declared
+}
+
+/**
+ * Writes a `style={expr}` and the `style:prop` directives beside it as one group, through the
+ * CSSOM: `plain` is the attribute's value, and `values` each directive's, in the order of `names`,
+ * its properties space-separated.
+ *
+ * 32.71 — ONLY ITS OWN PROPERTIES, in the server's cascade: the attribute's declarations, then
+ * each directive's in the tag's order (`styleValue`), a later one winning and one with no value
+ * declaring nothing. Only what moved is written. The attribute is parsed only when its text
+ * changed — never on the first run, whose value the served page or built row already carries —
+ * and every write is guarded by a compare. Where the attribute changed or a directive emptied,
+ * the cascade is laid again from the attribute, which is how a shorthand on one side and a
+ * longhand on the other resolve as they did in the server's list.
+ */
+export function setStyleGroup(
+    element: Element,
+    names: string,
+    plain: unknown,
+    values: readonly unknown[],
+): void {
+    WORK.bindingRuns += 1
+    let held = owned.get(element)
+    if (held === undefined) {
+        held = {
+            text: undefined,
+            declared: undefined,
+            values: undefined,
+            names: names.split(' '),
+        }
+        owned.set(element, held)
+    }
+    const style = (element as HTMLElement).style
+    const text = textOf(plain)
+    const was = held.values
+    // The first directive to write again, every one after it too: a later one wins.
+    let from = -1
+    if (held.text === undefined) held.text = text
+    else if (text !== held.text) {
+        const before = held.declared ?? declarationsOf(held.text)
+        const after = declarationsOf(text)
+        for (const property of before.keys())
+            if (!after.has(property) && style.getPropertyValue(property) !== '')
+                style.removeProperty(property)
+        lay(style, after)
+        held.text = text
+        held.declared = after
+        from = 0
+    }
+    for (let at = 0; at < held.names.length && from !== 0; at += 1) {
+        const value = directiveValue(values[at])
+        if (was !== undefined && directiveValue(was[at]) === value) continue
+        if (value !== '' || was === undefined) {
+            if (from === -1 && value !== '') from = at
+            continue
+        }
+        const name = held.names[at] as string
+        if (style.getPropertyValue(name) !== '') style.removeProperty(name)
+        held.declared ??= declarationsOf(held.text)
+        lay(style, held.declared)
+        from = 0
+    }
+    if (from !== -1)
+        for (let at = from; at < held.names.length; at += 1) {
+            const value = directiveValue(values[at])
+            const name = held.names[at] as string
+            if (value !== '' && style.getPropertyValue(name) !== value)
+                style.setProperty(name, value)
+        }
+    held.values = values
+}
+
+/** A directive's value, cut as the server cuts it; `''` declares nothing. */
+function directiveValue(value: unknown): string {
+    return oneStyleValue(textOf(value))
+}
+
+/** Writes each declaration the element does not already carry. */
+function lay(
+    style: CSSStyleDeclaration,
+    declared: Map<string, [value: string, priority: string]>,
+): void {
+    for (const [property, [value, priority]] of declared)
+        if (
+            style.getPropertyValue(property) !== value ||
+            style.getPropertyPriority(property) !== priority
+        )
+            style.setProperty(property, value, priority)
+}