@markuplint/ml-core 5.4.0 → 5.6.0

package/lib/ml-dom/node/element.js

@@ -2,17 +2,23 @@
 var _a;
 import { getSpecByTagName, resolveNamespace } from '@markuplint/ml-spec';
 import { pretenderNamespaceToURI } from '@markuplint/ml-config';
-import { getChildNamespace } from '@markuplint/parser-utils';
-import { matchSelector, typeNameMatches } from '@markuplint/selector';
+import { ConfigParserError, getChildNamespace } from '@markuplint/parser-utils';
+import { InvalidSelectorError, matchSelector, typeNameMatches } from '@markuplint/selector';
 import { getAccname, getAccnameVisits, getHostLanguageLabelSource, getReferencedTextAlternative, } from '../helper/accname.js';
+import { literalToExpression } from '../helper/literal-values.js';
+import { markPretendedAttr } from '../helper/pretended-attrs.js';
+import { getAssignedNodes, getAssignedSlot, getFlatTreeSlot, getFlattenedSlottables, } from '../helper/slot-assignment.js';
+import { getDeclarativeShadowRootAttachment, getDeclarativeShadowRootMode, getShadowRootTemplate, isHTMLTemplateElement, } from '../helper/tree-scope.js';
 import { after, before, nextElementSibling, previousElementSibling, remove, replaceWith, } from '../manipulations/child-node-methods.js';
 import { MLAttr } from './attr.js';
+import { MLDocumentFragment } from './document-fragment.js';
 import { MLDomTokenList } from './dom-token-list.js';
 import { MLElementCloseTag } from './element-close-tag.js';
 import { toNamedNodeMap } from './named-node-map.js';
 import { toHTMLCollection, toNodeList } from './node-list.js';
 import { MLParentNode } from './parent-node.js';
-import { UnexpectedCallError, asciiLowerCase, vuePropKey } from '@markuplint/shared';
+import { MLShadowRoot } from './shadow-root.js';
+import { UnexpectedCallError, asciiLowerCase, isFatalError, vuePropKey } from '@markuplint/shared';
 const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
 /**
  * Represents a DOM Element node wrapper in the markuplint DOM tree.
@@ -830,14 +836,15 @@ export class MLElement extends MLParentNode {
         throw new UnexpectedCallError('Not supported "ariaValueText" property');
     }
     /**
-     * **IT THROWS AN ERROR WHEN CALLING THIS.**
+     * The slot of an open declarative shadow root that this element is assigned to, or `null` when no
+     * slot takes it, the root is closed (the DOM does not expose it), or the assignment is not known
+     * (see {@link MLElement.getFlatTreeSlot}).
      *
-     * @unsupported
      * @implements DOM API: `Element`
      * @see https://dom.spec.whatwg.org/#dom-slotable-assignedslot
      */
     get assignedSlot() {
-        throw new UnexpectedCallError('Not supported "assignedSlot" property');
+        return getAssignedSlot(this);
     }
     /**
      * **IT THROWS AN ERROR WHEN CALLING THIS.**
@@ -918,7 +925,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-clientheight-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-clientheight
      */
     get clientHeight() {
         throw new UnexpectedCallError('Not supported "clientHeight" property');
@@ -928,7 +935,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-clientleft-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-clientleft
      */
     get clientLeft() {
         throw new UnexpectedCallError('Not supported "clientLeft" property');
@@ -938,7 +945,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-clienttop-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-clienttop
      */
     get clientTop() {
         throw new UnexpectedCallError('Not supported "clientTop" property');
@@ -948,7 +955,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-clientwidth-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-clientwidth
      */
     get clientWidth() {
         throw new UnexpectedCallError('Not supported "clientWidth" property');
@@ -1052,7 +1059,7 @@ export class MLElement extends MLParentNode {
      * @deprecated
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://html.spec.whatwg.org/multipage/interaction.html#dom-inert
+     * @see https://html.spec.whatwg.org/multipage/dom.html#dom-inert
      */
     get inert() {
         throw new UnexpectedCallError('Not supported "inert" property');
@@ -1062,7 +1069,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://w3c.github.io/DOM-Parsing/#dom-innerhtml-innerhtml
+     * @see https://w3c.github.io/DOM-Parsing/#dom-innerhtml
      */
     get innerHTML() {
         throw new UnexpectedCallError('Not supported "innerHTML" property');
@@ -2304,7 +2311,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-scrollheight-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-scrollheight
      */
     get scrollHeight() {
         throw new UnexpectedCallError('Not supported "scrollHeight" property');
@@ -2314,7 +2321,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-scrollleft-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-scrollleft
      */
     get scrollLeft() {
         throw new UnexpectedCallError('Not supported "scrollLeft" property');
@@ -2324,7 +2331,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-scrolltop-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-scrolltop
      */
     get scrollTop() {
         throw new UnexpectedCallError('Not supported "scrollTop" property');
@@ -2334,21 +2341,114 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-scrollwidth-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-scrollwidth
      */
     get scrollWidth() {
         throw new UnexpectedCallError('Not supported "scrollWidth" property');
     }
     /**
-     * **IT THROWS AN ERROR WHEN CALLING THIS.**
+     * The shadow root that a `template` element with `shadowrootmode="open"` declares on this element:
+     * `null` for a `closed` one, which the DOM does not expose, and when there is none. See
+     * {@link MLElement.declarativeShadowRoot} for one of either mode.
      *
-     * @unsupported
      * @implements DOM API: `Element`
      * @see https://dom.spec.whatwg.org/#ref-for-dom-element-shadowroot%E2%91%A0
      */
     get shadowRoot() {
-        throw new UnexpectedCallError('Not supported "shadowRoot" property');
+        const shadowRoot = this.declarativeShadowRoot;
+        return shadowRoot?.mode === 'open' ? shadowRoot : null;
+    }
+    /**
+     * Whether this element is an HTML `template` element, which holds its children in {@link MLElement.content},
+     * a tree of its own. A `template` of a framework that puts the children in the element itself
+     * (`templateContent: 'in-place'` in the spec: React, Vue), a fragment, and a `template` with a
+     * directive of a template engine are not.
+     *
+     * The getters about trees (this one, {@link MLElement.declarativeShadowRootAttachment},
+     * {@link MLElement.content}, `getRootNode()` and the id lookups) keep what they first return: they
+     * depend on the pretenders, the spec and the whole syntax tree, which are all in place once the
+     * document is built, and the document does not change after that.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+     */
+    get isHTMLTemplateElement() {
+        this.#isHTMLTemplateElement ??= isHTMLTemplateElement(this);
+        return this.#isHTMLTemplateElement;
+    }
+    #isHTMLTemplateElement;
+    /**
+     * Whether this element is in no tree: an HTML `template` element that a declarative shadow root is
+     * attached to, or that may have one (see {@link DeclarativeShadowRootAttachment}). The parser inserts
+     * such an element into no tree, so it has no parent in a tree, is its own root, and is found by no
+     * query of a tree. Unknown is treated as in no tree, as markuplint does not count what it cannot tell.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     */
+    get isInNoTree() {
+        return this.isHTMLTemplateElement && this.declarativeShadowRootAttachment !== 'not-attached';
+    }
+    /**
+     * The mode that the `shadowrootmode` attribute of an HTML `template` element asks for. `null` when the
+     * element is not one, the attribute is missing or invalid, or its value is dynamic.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     */
+    get declarativeShadowRootMode() {
+        return getDeclarativeShadowRootMode(this);
+    }
+    /**
+     * Whether the HTML parser attaches a declarative shadow root to the parent of this `template`
+     * element (see {@link DeclarativeShadowRootAttachment}).
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     */
+    get declarativeShadowRootAttachment() {
+        this.#declarativeShadowRootAttachment ??= getDeclarativeShadowRootAttachment(this);
+        return this.#declarativeShadowRootAttachment;
+    }
+    #declarativeShadowRootAttachment;
+    /**
+     * The content of an HTML `template` element: a document fragment that is a tree of its own, holding
+     * the same nodes as the children of the element. When a declarative shadow root is attached to the
+     * parent of the `template`, it is the shadow root. `null` for an element that is not an HTML
+     * `template` element.
+     *
+     * @implements DOM API: `HTMLTemplateElement`
+     * @see https://html.spec.whatwg.org/multipage/scripting.html#dom-template-content
+     */
+    get content() {
+        if (this.#content !== undefined) {
+            return this.#content;
+        }
+        if (!this.isHTMLTemplateElement) {
+            this.#content = null;
+            return null;
+        }
+        const astNode = { ...this._astToken, uuid: `${this.uuid}:content` };
+        this.#content =
+            this.declarativeShadowRootAttachment === 'attached'
+                ? new MLShadowRoot(astNode, this.ownerMLDocument, this)
+                : new MLDocumentFragment(astNode, this.ownerMLDocument);
+        return this.#content;
+    }
+    #content;
+    /**
+     * The shadow root that a `template` element declares on this element, whatever its mode.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     * @returns The shadow root, or `null` when none is attached to this element
+     */
+    get declarativeShadowRoot() {
+        if (this.#declarativeShadowRoot !== undefined) {
+            return this.#declarativeShadowRoot;
+        }
+        const template = getShadowRootTemplate(this);
+        const content = template?.content;
+        this.#declarativeShadowRoot = content instanceof MLShadowRoot ? content : null;
+        return this.#declarativeShadowRoot;
     }
+    #declarativeShadowRoot;
     /**
      * @implements DOM API: `Element`
      * @see https://dom.spec.whatwg.org/#ref-for-dom-element-slot%E2%91%A0
@@ -2468,13 +2568,43 @@ export class MLElement extends MLParentNode {
         throw new UnexpectedCallError('Not supported "animate" method');
     }
     /**
+     * The nodes this `slot` places, in tree order, or with `flatten` what it renders in the flat tree. It
+     * is empty when the assignment is not known; use {@link MLElement.getAssignedNodes} to tell the two apart.
+     *
+     * @implements DOM API: `HTMLSlotElement`
      * @see https://html.spec.whatwg.org/multipage/scripting.html#dom-slot-assignednodes
      */
-    assignedNodes() {
+    assignedNodes(options) {
         if (this.localName !== 'slot') {
             throw new TypeError('assignedNodes is not a function');
         }
-        return [];
+        return [...(options?.flatten ? getFlattenedSlottables(this) : (this.getAssignedNodes() ?? []))];
+    }
+    /**
+     * The nodes this `slot` places, by the named slot assignment of the declarative shadow root it is in.
+     * A slot that takes none has `[]`, and renders its own children. `null` when the assignment is not
+     * known; what makes it so is in the module comment of `helper/slot-assignment.ts`.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     * @see https://dom.spec.whatwg.org/#find-slotables
+     */
+    getAssignedNodes() {
+        return getAssignedNodes(this);
+    }
+    /**
+     * The slot that places this element in the flat tree: the slot of the shadow root of its parent that
+     * takes it. `null` when its parent is a shadow host and no slot takes it, so that it is not rendered;
+     * `undefined` when its parent is not a shadow host, or the assignment is not known
+     * (see {@link MLElement.getAssignedNodes}).
+     *
+     * `getComposedParentElement` of `@markuplint/ml-spec` reads it as the parent that the accessibility
+     * tree has for the element.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     * @see https://dom.spec.whatwg.org/#find-a-slot
+     */
+    getFlatTreeSlot() {
+        return getFlatTreeSlot(this);
     }
     /**
      * **IT THROWS AN ERROR WHEN CALLING THIS.**
@@ -2549,7 +2679,7 @@ export class MLElement extends MLParentNode {
             if (el.matches(selectors)) {
                 return el;
             }
-            el = el.parentElement;
+            el = el.treeParentElement;
         } while (el !== null && el.is(el.ELEMENT_NODE));
         return null;
     }
@@ -2690,7 +2820,8 @@ export class MLElement extends MLParentNode {
         let first = null;
         let lastSetByCode = null;
         for (const attr of this.attributes) {
-            if (!attr.isNamedBy(attrName)) {
+            // An attribute that the framework does not output (`disabled={false}`) is not an attribute of the element
+            if (attr.isAbsent || !attr.isNamedBy(attrName)) {
                 continue;
             }
             first ??= attr;
@@ -2720,7 +2851,7 @@ export class MLElement extends MLParentNode {
      * @see https://dom.spec.whatwg.org/#ref-for-dom-element-getattributenames%E2%91%A0
      */
     getAttributeNames() {
-        return [...this.attributes].map(attr => attr.name);
+        return [...this.attributes].filter(attr => !attr.isAbsent).map(attr => attr.name);
     }
     /**
      * @implements DOM API: `Element`
@@ -2753,7 +2884,7 @@ export class MLElement extends MLParentNode {
      */
     getAttributePretended(attrName) {
         for (const attr of this.#attributes) {
-            if (attr.isNamedBy(attrName)) {
+            if (!attr.isAbsent && attr.isNamedBy(attrName)) {
                 return attr.value;
             }
         }
@@ -2761,7 +2892,8 @@ export class MLElement extends MLParentNode {
     }
     /**
      * Returns all attribute tokens matching the given name, including duplicates.
-     * Unlike `getAttribute`, this returns the full `MLAttr` token objects.
+     * Unlike `getAttribute`, this returns the full `MLAttr` token objects. An attribute that the
+     * framework does not output (`MLAttr#isAbsent`) is not one of them, as it is not for `getAttribute`.
      *
      * @implements `@markuplint/ml-core` API: `MLElement`
      * @param attrName - The attribute name to look up (see {@link MLAttr.isNamedBy} for how its case is compared)
@@ -2770,7 +2902,7 @@ export class MLElement extends MLParentNode {
     getAttributeToken(attrName) {
         const attrs = [];
         for (const attr of this.getAttributeTokens()) {
-            if (attr.isNamedBy(attrName)) {
+            if (!attr.isAbsent && attr.isNamedBy(attrName)) {
                 attrs.push(attr);
             }
         }
@@ -2779,6 +2911,9 @@ export class MLElement extends MLParentNode {
     /**
      * Returns all attribute tokens for this element, respecting the pretender context.
      * If the element is pretending to be another, returns the pretender's attributes.
+     * It lists every attribute that is written, those that the framework does not output
+     * (`MLAttr#isAbsent`) too, as a name that is misspelled is so whatever its value is; what is asked
+     * of the DOM by name (`getAttributeToken`, `getAttribute`) does not find them.
      *
      * @implements `@markuplint/ml-core` API: `MLElement`
      * @returns A frozen array of all attribute tokens
@@ -2791,7 +2926,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-getboundingclientrect-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-getboundingclientrect
      */
     getBoundingClientRect() {
         throw new UnexpectedCallError('Not supported "getBoundingClientRect" method');
@@ -2830,7 +2965,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://www.w3.org/TR/cssom-view-1/#ref-for-dom-element-getclientrects-1
+     * @see https://www.w3.org/TR/cssom-view-1/#dom-element-getclientrects
      */
     getClientRects() {
         throw new UnexpectedCallError('Not supported "getClientRects" method');
@@ -2912,7 +3047,7 @@ export class MLElement extends MLParentNode {
      * @see https://dom.spec.whatwg.org/#dom-element-hasattributes
      */
     hasAttributes() {
-        return this.attributes.length > 0;
+        return this.attributes.some(attr => !attr.isAbsent);
     }
     /**
      * Checks whether this element has any mutable attributes, such as spread
@@ -2926,16 +3061,37 @@ export class MLElement extends MLParentNode {
             if (!attr.nameNode) {
                 return true;
             }
-            if (attr.isDynamicValue) {
+            // An attribute that is known not to be output does not change
+            if (attr.isDynamicValue && !attr.isAbsent) {
                 return true;
             }
         }
         return false;
     }
+    /**
+     * Checks whether this element is a component whose rendered output is not known: the
+     * parser sees it as a component (`elementType` is `'authored'`) and no pretender stands
+     * for an element of HTML, which includes a pretender whose own target is a component
+     * (the chain of `pretenders.auto` stopped at `Tabs.Root`).
+     *
+     * A web component is not one: it is the element that it is written as. The criterion of
+     * `isTreatedAsCustom` in `@markuplint/rules` (`permitted-contents`) includes it, because
+     * a content model accepts a custom element wherever it accepts flow content; change them
+     * together.
+     *
+     * @implements `@markuplint/ml-core` API: `MLElement`
+     * @returns True if what this element renders is not known
+     */
+    isUnresolvedComponent() {
+        if (this.pretenderContext?.type === 'pretender') {
+            return this.pretenderContext.as.elementType === 'authored';
+        }
+        return this.elementType === 'authored';
+    }
     /**
      * Checks whether this element has children that are potentially mutable,
      * such as preprocessor-specific blocks, slot elements, or (optionally) elements
-     * with dynamic attributes.
+     * with dynamic attributes and components that no pretender resolved.
      *
      * Blocks that carry a `blockBehavior` are not treated as mutable because
      * their branches are deterministically enumerable via
@@ -2943,11 +3099,29 @@ export class MLElement extends MLParentNode {
      * like `{value}`) can produce arbitrary content, so the children are
      * considered mutable.
      *
+     * A component that no pretender resolved renders something that is not known, however its
+     * attributes are written (`size={size}`, `size={16}` and `size="16"` tell the same): a rule that
+     * asks about what the descendants are or have (the accessible name, the owned elements) cannot decide
+     * on it, so it is mutable when `attr` is true ({@link MLElement.isUnresolvedComponent}). A component
+     * that a pretender resolved is the element that it renders, which the rules read themselves.
+     *
+     * A rule that asks which children an element has (the required children, the elements that
+     * satisfy a query) does not pass `attr`: an attribute that cannot be known does not decide whether
+     * a child exists. It looks for the unresolved components among the children itself.
+     *
+     * Every `slot` is mutable by default, as a `slot` that is not in a declarative shadow root renders what
+     * is given to it, and a rule that reads the children as they are written (`require-datetime`) cannot
+     * know it. A rule that reads what a slot of a shadow root renders by `MLElement#getAssignedNodes` says
+     * which slots are with `isMutableSlot`.
+     *
+     *
      * @implements `@markuplint/ml-core` API: `MLElement`
-     * @param attr - When true, also considers children with mutable attributes as mutable
+     * @param attr - When true, also considers children with mutable attributes, and components that no
+     * pretender resolved, as mutable
+     * @param isMutableSlot - Whether a `slot` among the descendants may render what is not known
      * @returns True if this element has potentially mutable children
      */
-    hasMutableChildren(attr = false) {
+    hasMutableChildren(attr = false, isMutableSlot = () => true) {
         for (const child of this.getPureChildNodes()) {
             if (child.is(child.MARKUPLINT_PREPROCESSOR_BLOCK)) {
                 if (child.blockBehavior) {
@@ -2959,10 +3133,13 @@ export class MLElement extends MLParentNode {
                 if (attr && child.hasMutableAttributes()) {
                     return true;
                 }
-                if (child.hasMutableChildren(attr)) {
+                if (attr && child.isUnresolvedComponent()) {
+                    return true;
+                }
+                if (child.hasMutableChildren(attr, isMutableSlot)) {
                     return true;
                 }
-                if (child.localName === 'slot') {
+                if (child.localName === 'slot' && isMutableSlot(child)) {
                     return true;
                 }
             }
@@ -3006,7 +3183,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://w3c.github.io/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text
+     * @see https://w3c.github.io/DOM-Parsing/#dom-element-insertadjacenthtml
      */
     insertAdjacentHTML(position, text) {
         throw new UnexpectedCallError('Does not implement "insertAdjacentHTML" method yet');
@@ -3221,7 +3398,19 @@ export class MLElement extends MLParentNode {
         if (this.elementType === 'html' && this.ownerMLDocument.isNativeTag(this.localName, this.namespaceURI)) {
             return;
         }
-        const pretenderConfig = pretenders?.find(option => this.matches(option.selector));
+        const pretenderConfig = pretenders?.find(option => {
+            try {
+                return this.matches(option.selector);
+            }
+            catch (error) {
+                // An entry that a scan or a file made names the file that declares its component, which is
+                // where the user fixes it. `MLDocument` names the configuration for any other.
+                if (!isFatalError(error) && error instanceof InvalidSelectorError && option.filePath) {
+                    throw new ConfigParserError(error.message, { filePath: option.filePath, raw: option.selector });
+                }
+                throw error;
+            }
+        });
         const asAttrValue = this.getAttribute('as');
         const pretenderElement = pretenderConfig?.as ??
             (this.elementType === 'html' || !asAttrValue
@@ -3286,9 +3475,19 @@ export class MLElement extends MLParentNode {
         };
     }
     /**
-     * Converts pretender attributes to AST attributes for a virtual element.
+     * Converts pretender attributes to AST attributes for a virtual element. They are marked as made by
+     * a pretender (`MLAttr#isPretended`): the position of their tokens is the element's, not the source's.
+     *
+     * `{ expression }` is the code that the attribute is written as in the component. It becomes an
+     * attribute written as code (`{` and `}` are its quotes), which `MLAttr` reads as JavaScript
+     * whatever the language of the document is: a literal in it is rendered as the framework renders
+     * it, and any other code is dynamic.
      *
-     * `{ fromAttr }` reads this (the origin) element's attribute. When that attribute is an
+     * `{ fromAttr }` reads this (the origin) element's attribute. When that attribute is a literal
+     * (`kind={false}`, `kind`), the literal is rendered under the name of the attribute that the
+     * virtual element gets, which is what the component does with the prop it forwards
+     * (`<Button disabled={false}>` forwarded to `<button disabled={props.disabled}>` has no `disabled`,
+     * and forwarded to `aria-label={props.disabled}` it has `aria-label="false"`). When it is any other
      * expression (`kind={kind}`), the result is dynamic as well: the value the component
      * receives is unknown, and the source text of the expression is not a value to validate.
      * When the attribute is not written and `omitIfMissing` is set, the virtual element gets
@@ -3302,9 +3501,14 @@ export class MLElement extends MLParentNode {
         return attrs.flatMap(({ name, value }, i) => {
             let isDynamic = value != null && typeof value === 'object' && 'dynamic' in value;
             let _value = '';
+            // The code that the attribute is written as, when it is known
+            let expression;
             if (typeof value === 'string') {
                 _value = value;
             }
+            else if (value != null && 'expression' in value) {
+                expression = value.expression;
+            }
             else if (value != null && 'fromAttr' in value) {
                 // The attribute of the usage site that the prop is. Vue gives a prop the attribute by the camelCase
                 // of its name (`my-label` and `myLabel` are the prop `myLabel`, and `mylabel` is another),
@@ -3316,15 +3520,21 @@ export class MLElement extends MLParentNode {
                 if (!origin && value.omitIfMissing) {
                     return [];
                 }
-                if (origin?.isDynamicValue) {
+                if (origin?.literal) {
+                    // The key of a literal is the code that it is written as (`true`, `"x"`, `0`), except for a number that
+                    // is not finite (`Infinity` is a name, which is not a literal)
+                    expression = literalToExpression(origin.literal);
+                }
+                else if (origin?.isDynamicValue) {
                     isDynamic = true;
                 }
                 else {
                     _value = origin?.value ?? '';
                 }
             }
+            const isExpression = expression !== undefined;
             return [
-                {
+                markPretendedAttr({
                     ...this._astToken,
                     uuid: `${uuidBase}_attr_${i}`,
                     type: 'attr',
@@ -3351,24 +3561,24 @@ export class MLElement extends MLParentNode {
                     },
                     startQuote: {
                         ...this._astToken,
-                        raw: '',
+                        raw: isExpression ? '{' : '',
                     },
                     value: {
                         ...this._astToken,
-                        raw: _value,
+                        raw: expression ?? _value,
                     },
                     endQuote: {
                         ...this._astToken,
-                        raw: '',
+                        raw: isExpression ? '}' : '',
                     },
                     isDuplicatable: true,
-                    ...(isDynamic ? { isDynamicValue: true } : {}),
+                    ...(isDynamic || isExpression ? { isDynamicValue: true } : {}),
                     parentNode: null,
                     nextNode: null,
                     prevNode: null,
                     isFragment: false,
                     isGhost: false,
-                },
+                }),
             ];
         });
     }
@@ -3543,7 +3753,7 @@ export class MLElement extends MLParentNode {
      *
      * @unsupported
      * @implements DOM API: `Element`
-     * @see https://w3c.github.io/pointerlock/#dom-element-requestpointerlock
+     * @see https://www.w3.org/TR/pointerlock-2/#dom-element-requestpointerlock
      */
     requestPointerLock(options) {
         throw new UnexpectedCallError('Not supported "requestPointerLock" method');

package/lib/ml-dom/node/named-node-map.js

@@ -1,7 +1,8 @@
 import { UnexpectedCallError } from '@markuplint/shared';
 export class MLNamedNodeMap extends Array {
     getNamedItem(qualifiedName) {
-        return this.find(attr => attr.isNamedBy(qualifiedName)) ?? null;
+        // An attribute that the framework does not output (`MLAttr#isAbsent`) is not found, as the DOM has none
+        return this.find(attr => !attr.isAbsent && attr.isNamedBy(qualifiedName)) ?? null;
     }
     /**
      * **IT THROWS AN ERROR WHEN CALLING THIS.**

package/lib/ml-dom/node/node-list.js

@@ -10,10 +10,9 @@ class MLNodeList extends Array {
              *
              * It throws an error because it should return null but the `item` method of `NodeListOf` doesn't return null in the type definition of TypeScript.
              *
-             * @see https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136
+             * @see https://dom.spec.whatwg.org/#dom-nodelist-item
              *
-             * > item
-             * > Returns the index-th item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.
+             * > The item(index) method must return the indexth node in the collection. If there is no indexth node in the collection, then the method must return null.
              */
             throw new ReferenceError('Invalid index');
         }