@markuplint/ml-core 5.1.1 → 5.3.0

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

@@ -1,7 +1,9 @@
 /* global StylePropertyMap, StylePropertyMapReadOnly */
 var _a;
 import { getSpecByTagName, resolveNamespace } from '@markuplint/ml-spec';
-import { matchSelector } from '@markuplint/selector';
+import { pretenderNamespaceToURI } from '@markuplint/ml-config';
+import { getChildNamespace } from '@markuplint/parser-utils';
+import { matchSelector, typeNameMatches } from '@markuplint/selector';
 import { getAccname } from '../helper/accname.js';
 import { after, before, nextElementSibling, previousElementSibling, remove, replaceWith, } from '../manipulations/child-node-methods.js';
 import { MLAttr } from './attr.js';
@@ -10,7 +12,7 @@ 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 } from '@markuplint/shared';
+import { UnexpectedCallError, asciiLowerCase, vuePropKey } from '@markuplint/shared';
 const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
 /**
  * Represents a DOM Element node wrapper in the markuplint DOM tree.
@@ -38,8 +40,149 @@ export class MLElement extends MLParentNode {
     #getChildElementsAndTextNodeWithoutWhitespacesCache = null;
     /**
      * Whether this element belongs to a non-HTML namespace (e.g., SVG or MathML).
+     *
+     * Unlike {@link namespaceURI}, it does not follow the pretender: it says how the tag
+     * written here is parsed (whether the case of its name is kept, whether `/>` closes
+     * it), and the tag of a component is not parsed as the element it renders. An element
+     * given to a component as a child is, as it ends up inside what the component renders.
      */
-    isForeignElement;
+    get isForeignElement() {
+        return this.#namespaceURI !== HTML_NAMESPACE;
+    }
+    /**
+     * Whether two names would be one attribute on this element, for names that no attribute of the
+     * element stands behind (the names of a spec, of an option or of a rule value, where the
+     * attribute may be missing). It is {@link MLAttr.isNamedBy} without an attribute.
+     *
+     * The HTML syntax folds the ASCII case. A name that code sets through the DOM API is folded
+     * only on an element of the HTML namespace: on an SVG or MathML element it keeps its spelling,
+     * and a name with a capital letter is a prop of the framework. The props of a component are
+     * not folded, except that Vue camelizes them.
+     *
+     * With no attribute, whether the name is set through the DOM API is up to the parser alone: the
+     * attribute is not dynamic, so Svelte's name is read as the HTML parser reads it.
+     *
+     * @see https://dom.spec.whatwg.org/#dom-element-setattribute
+     * @see https://html.spec.whatwg.org/multipage/parsing.html#attribute-name-state
+     *
+     * @param a - A name
+     * @param b - The other name
+     * @returns `true` if both names are one attribute on this element
+     */
+    isSameAttrName(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (this.elementType === 'authored') {
+            return this.ownerMLDocument.componentNameVariants && vuePropKey(a) === vuePropKey(b);
+        }
+        if (this.ownerMLDocument.attrNameRoute === 'dom-api' && (this.isForeignElement || /[A-Z]/.test(a + b))) {
+            return false;
+        }
+        return asciiLowerCase(a) === asciiLowerCase(b);
+    }
+    /**
+     * Whether the `#custom` entry of a content model category (`:model(flow)` etc.) covers this element.
+     *
+     * Anything that is not a native HTML element counts, an authored component (`<Foo />`)
+     * as well as an autonomous custom element (`<x-foo>`). Keep it in step with `isTreatedAsCustom`
+     * of `permitted-contents` (`'pretended'` mode), which applies the same criterion to `#custom`;
+     * they are separate on purpose, as `isTreatedAsCustom` also serves the `'origin'` mode.
+     *
+     * Like {@link localName}, it follows the pretender, since a selector sees the element
+     * the component renders. A pretender target is created with `elementType: 'html'`, so it
+     * is a custom element when its own name has a hyphen. A target whose name is a component
+     * (`Tabs.Root`; the rule is the parser's, see {@link MLDocument.isComponentName}) is created as
+     * `'authored'` and counts like one written directly: the scanners of `pretenders.auto` end a chain at such a name when
+     * they cannot resolve it, and what that component renders is not known.
+     *
+     * Known limitation: the hyphen test is only the hyphen. A pretender target named after a reserved
+     * hyphenated name (`annotation-xml`, `font-face`, ...) counts as custom here, whereas the same
+     * element written directly does not. `isTreatedAsCustom` shares the limitation.
+     */
+    get isCustomElement() {
+        if (this.pretenderContext?.type === 'pretender') {
+            const { as } = this.pretenderContext;
+            return as.elementType === 'authored' || as.localName.includes('-');
+        }
+        return this.elementType !== 'html';
+    }
+    /**
+     * Whether the document tells the case of a tag name apart (see {@link MLDocument.tagNameCaseSensitive}).
+     * A type selector reads it, as {@link localName} alone cannot tell it: an element that HTML names
+     * case-insensitively (`<foobar>`) has a lowercase-folded pair of `localName` / `nodeName` in
+     * every document, but in JSX it is not `<FooBar>`.
+     *
+     * @implements `SelectorElement#tagNameCaseSensitive` of `@markuplint/selector`
+     */
+    get tagNameCaseSensitive() {
+        return this.ownerMLDocument.tagNameCaseSensitive;
+    }
+    /**
+     * What this element is for a type selector, in a document that resolves a component by any
+     * spelling of its name (Vue, see {@link MLDocument.componentNameVariants}); `undefined` in any other.
+     *
+     * - `component`: not an HTML element (`<FooBar>`, `<foo-bar>`), which {@link localName} names as written
+     * - `native`: an HTML element that the document takes for native (`<button>`, see {@link MLDocument.isNativeTag}:
+     *   the parser's rule, as Vue's `isNativeTag`, else the specification), the guard of {@link pretending}.
+     *   The element that a pretender stands for is judged by the specification alone
+     * - `unknown-html`: an HTML element that it does not (`<foobar>`; in Vue also `<marquee>`, which has a
+     *   specification but resolves to a component when one is imported)
+     *
+     * Like {@link localName}, it follows the pretender, since a selector sees the element the component
+     * renders. An element of the SVG or MathML namespace has none: it keeps the case of its name.
+     *
+     * @implements `SelectorElement#tagNameKind` of `@markuplint/selector`
+     */
+    get tagNameKind() {
+        const document = this.ownerMLDocument;
+        if (!document.componentNameVariants) {
+            return;
+        }
+        const target = this.pretenderContext?.type === 'pretender' ? this.pretenderContext.as : this;
+        if (target.isForeignElement) {
+            return;
+        }
+        if (target.elementType !== 'html') {
+            return 'component';
+        }
+        // A tag as written is the language's to resolve; the name a pretender gives (`as`) is the element itself
+        const isNative = target === this
+            ? document.isNativeTag(target.localName, target.namespaceURI)
+            : getSpecByTagName(document.specs.specs, target.localName, target.namespaceURI) != null;
+        return isNative ? 'native' : 'unknown-html';
+    }
+    /**
+     * Whether a name that a user writes for an element (the `tag` of a rule option, as against the
+     * type name of a selector, which {@link matches} takes) stands for this element, written as it is,
+     * in a document that resolves a component by any spelling of its name (Vue, see
+     * {@link MLDocument.componentNameVariants}): `FooBar` stands for `<foo-bar>` and `<fooBar>`.
+     *
+     * It is `false` in any other document, so that a caller that compares a name as it is can ask
+     * it as well without changing what it does there. It ignores the pretender: the name is the one
+     * the element is written with. To ask so, it hides the pretender of this element for the length of the
+     * call (as {@link matchMLSelector} does for its second try), so nothing in it may be async.
+     *
+     * @param name - The name as the user wrote it
+     * @returns Whether the name stands for this element
+     */
+    matchesTagNameVariant(name) {
+        if (!this.ownerMLDocument.componentNameVariants) {
+            return false;
+        }
+        const pretenderContext = this.pretenderContext;
+        if (pretenderContext?.type !== 'pretender') {
+            return this.tagNameKind !== undefined && typeNameMatches(name, this);
+        }
+        // The element as written, not as the pretender makes it: as `matchMLSelector` does for its second try
+        this.pretenderContext = null;
+        try {
+            return this.tagNameKind !== undefined && typeNameMatches(name, this);
+        }
+        finally {
+            this.pretenderContext = pretenderContext;
+        }
+    }
     /**
      * Whether this element was implicitly created (e.g., an omitted `<body>` tag in HTML).
      */
@@ -47,8 +190,19 @@ export class MLElement extends MLParentNode {
     #localName;
     /**
      * The namespace URI of this element (e.g., `http://www.w3.org/1999/xhtml` for HTML elements).
+     *
+     * Like {@link localName}, it follows the pretender, so that a namespaced selector
+     * (`svg|svg`) and a spec lookup see the element the component renders. An element
+     * given to a component as a child takes the namespace of where the component renders
+     * it, resolved when the document pretends.
      */
-    namespaceURI;
+    get namespaceURI() {
+        if (this.pretenderContext?.type === 'pretender') {
+            return this.pretenderContext.as.namespaceURI;
+        }
+        return this.#namespaceURI;
+    }
+    #namespaceURI;
     /**
      * ## Why this cache exists
      *
@@ -122,10 +276,9 @@ export class MLElement extends MLParentNode {
             : null;
         this.closeTag = pairAstNode ? new MLElementCloseTag(pairAstNode, document, this) : null;
         const ns = resolveNamespace(astNode.nodeName, astNode.namespace);
-        this.namespaceURI = astNode.namespace;
+        this.#namespaceURI = astNode.namespace;
         this.elementType = astNode.elementType;
         this.#localName = ns.localName;
-        this.isForeignElement = this.namespaceURI !== HTML_NAMESPACE;
         this.isOmitted = astNode.isGhost;
         this.tagOpenChar = astNode.tagOpenChar;
         this.tagCloseChar = astNode.tagCloseChar;
@@ -681,28 +834,21 @@ export class MLElement extends MLParentNode {
         throw new UnexpectedCallError('Not supported "attributeStyleMap" property');
     }
     /**
+     * Every attribute written on the tag, the second of two spellings of one name too: unlike a DOM
+     * element, which keeps one of them, a rule checks each attribute that the author wrote, and
+     * `no-duplicate-attr` reports the second. Which of them the DOM keeps is what {@link getAttribute}
+     * returns.
+     *
      * @implements DOM API: `Element`
      * @see https://dom.spec.whatwg.org/#dom-element-attributes
      */
     get attributes() {
         const origin = this.pretenderContext?.type === 'pretender' ? this.pretenderContext.as.#attributes : this.#attributes;
-        if (this.#normalizedAttrs.has(origin)) {
-            return this.#normalizedAttrs.get(origin);
-        }
-        const names = new Set();
-        const attrs = [];
-        for (const attr of origin) {
-            if (names.has(attr.name)) {
-                /**
-                 * Skips a duplicated attribute
-                 *
-                 *@see https://html.spec.whatwg.org/#parse-error-duplicate-attribute
-                 */
-                continue;
-            }
-            attrs.push(attr);
+        const cached = this.#normalizedAttrs.get(origin);
+        if (cached) {
+            return cached;
         }
-        const map = toNamedNodeMap(attrs);
+        const map = toNamedNodeMap(origin);
         this.#normalizedAttrs.set(origin, map);
         return map;
     }
@@ -2456,16 +2602,31 @@ export class MLElement extends MLParentNode {
         throw new UnexpectedCallError('Not supported "getAnimations" method');
     }
     /**
+     * Whether `attrName` is the name of an attribute of this element is what {@link MLAttr.isNamedBy}
+     * says: `ROLE` is `role` on a `<div>` and, in JSX, is not on an `<svg>`. `hasAttribute`,
+     * `getAttributeToken`, `getAttributePretended`, a pretender's `fromAttr` and `getNamedItem` ask the same.
+     *
      * @implements DOM API: `Element`
      * @see https://dom.spec.whatwg.org/#ref-for-dom-element-getattribute%E2%91%A0
      */
     getAttribute(attrName) {
+        let first = null;
+        let lastSetByCode = null;
         for (const attr of this.attributes) {
-            if (attr.name.toLowerCase() === attrName.toLowerCase()) {
-                return attr.value;
+            if (!attr.isNamedBy(attrName)) {
+                continue;
+            }
+            first ??= attr;
+            // A directive, and an attribute that may be written twice (`class` and `:class`), are not
+            // two spellings of one name: the first is the one that is asked for
+            if (attr.isSetThroughDOMAPI && !attr.isDirective && !attr.isDuplicatable) {
+                lastSetByCode = attr;
             }
         }
-        return null;
+        // Of two attributes of one name, the HTML parser keeps the first and drops the second, while code
+        // that sets them one after another (`setAttribute`) lets the second overwrite the first.
+        // @see https://html.spec.whatwg.org/#parse-error-duplicate-attribute
+        return (lastSetByCode ?? first)?.value ?? null;
     }
     /**
      * **IT THROWS AN ERROR WHEN CALLING THIS.**
@@ -2510,12 +2671,12 @@ export class MLElement extends MLParentNode {
      * the original component element, not on the virtual pretender element.
      *
      * @implements `@markuplint/ml-core` API: `MLElement`
-     * @param attrName - The attribute name to look up (case-insensitive)
+     * @param attrName - The attribute name to look up (see {@link MLAttr.isNamedBy} for how its case is compared)
      * @returns The attribute value, or null if the attribute is not found
      */
     getAttributePretended(attrName) {
         for (const attr of this.#attributes) {
-            if (attr.name.toLowerCase() === attrName.toLowerCase()) {
+            if (attr.isNamedBy(attrName)) {
                 return attr.value;
             }
         }
@@ -2526,14 +2687,13 @@ export class MLElement extends MLParentNode {
      * Unlike `getAttribute`, this returns the full `MLAttr` token objects.
      *
      * @implements `@markuplint/ml-core` API: `MLElement`
-     * @param attrName - The attribute name to look up (case-insensitive)
+     * @param attrName - The attribute name to look up (see {@link MLAttr.isNamedBy} for how its case is compared)
      * @returns An array of matching attribute tokens
      */
     getAttributeToken(attrName) {
         const attrs = [];
-        attrName = attrName.toLowerCase();
         for (const attr of this.getAttributeTokens()) {
-            if (attr.name === attrName) {
+            if (attr.isNamedBy(attrName)) {
                 attrs.push(attr);
             }
         }
@@ -2861,6 +3021,102 @@ export class MLElement extends MLParentNode {
         }
         return matched;
     }
+    /**
+     * The element this element is rendered in: when the parent is a component, the
+     * element the component wraps its children with (the slot wrapper, or the element
+     * it renders), otherwise the parent. `null` at the top level. `undefined` when the
+     * parent is a component with more than one slot that give the children different
+     * namespaces.
+     *
+     * A custom element is not a component here: it puts the children in its light DOM,
+     * where they keep the namespace they are parsed in.
+     *
+     * The parent has pretended already: `MLDocument` calls `pretending()` in
+     * document order.
+     */
+    #getRenderedParent() {
+        const parent = this.parentElement;
+        if (parent?.pretenderContext?.type !== 'pretender' || parent.elementType === 'web-component') {
+            return parent;
+        }
+        const { as, slotContent } = parent.pretenderContext;
+        if (!slotContent) {
+            return as;
+        }
+        return slotContent.wrapper ?? parent.#sharedWrapper ?? undefined;
+    }
+    /**
+     * For a component with more than one slot, whose wrapper of each child is unknown, a
+     * wrapper that gives the children the same namespace as all the others do, so that
+     * the children can still be resolved. `null` when they differ (`<svg>` and the `<div>`
+     * inside its `foreignObject`).
+     */
+    #sharedWrapper = null;
+    #findSharedWrapper(slots, as) {
+        const wrappers = slots.map((slot, i) => this.#createVirtualElement(slot, `${this.uuid}_pretender_slot_${i}`, this.uuid, as));
+        const [first] = wrappers;
+        if (!first) {
+            return null;
+        }
+        const namespace = first.#getChildNamespace(null);
+        return wrappers.every(wrapper => wrapper.#getChildNamespace(null) === namespace) ? first : null;
+    }
+    /**
+     * The namespace of an element named `name` rendered as a child of this element, from
+     * its own resolved namespace rather than the one of what it pretends to be.
+     * `null` takes the namespace this element gives any element.
+     */
+    #getChildNamespace(name) {
+        return getChildNamespace(name, this.#namespaceURI, this._astToken.nodeName);
+    }
+    /**
+     * Re-resolves the namespace for the element this element is rendered in.
+     *
+     * The parser gives the children written inside a component the namespace of where
+     * the component is written, as it does not know what the component renders: in
+     * `<Icon><path /></Icon>`, where `Icon` renders `<svg>`, `path` is an HTML element
+     * to it. Its namespace is kept while the parent is where the parser put it, so that
+     * where no component is involved, the namespace stays what the parser gave, and when
+     * where the component renders it is unknown.
+     *
+     * `getChildNamespace` leaves foreign content only at `foreignObject`, so an element
+     * re-resolved here does not follow the other integration points (`<mi>`, `<desc>`),
+     * nor the HTML elements that break out of foreign content in an HTML document (`<div>`
+     * inside `<svg>`).
+     *
+     * A component is given no name, so that its own name is not taken for an element:
+     * `getChildNamespace` compares names in lowercase, so `<Math>` would enter MathML.
+     * The parsers of this repository do the same, but the AST may come from a parser
+     * that does not.
+     */
+    #resolveNamespace(renderedParent) {
+        const parent = this.parentElement;
+        if (!parent || !renderedParent) {
+            return;
+        }
+        if (renderedParent === parent && parent.#namespaceURI === parent._astToken.namespace) {
+            return;
+        }
+        this.#namespaceURI = renderedParent.#getChildNamespace(this.elementType === 'authored' ? null : this._astToken.nodeName);
+    }
+    /**
+     * The namespace of an element named `name` rendered where this element is, for the
+     * element this element pretends to be. `null` for what is not an element, a
+     * component.
+     *
+     * Where this element is has the namespace of this element, so the element gets the
+     * namespace an element written there gets. For a component, it is taken from the
+     * parent instead, as a parser that does not keep the name of a component out of
+     * the namespace may have taken it for an element (`<Svg>`, `<Math>`: the names are
+     * compared in lowercase).
+     */
+    #getNamespaceInPlace(name, renderedParent) {
+        let here = this.#namespaceURI;
+        if (this.elementType === 'authored' && renderedParent !== undefined) {
+            here = renderedParent ? renderedParent.#getChildNamespace(null) : HTML_NAMESPACE;
+        }
+        return getChildNamespace(name, here, null);
+    }
     /**
      * Initializes the pretender context for this element based on the given pretender
      * configurations. If a matching pretender is found or the element has an `as` attribute,
@@ -2869,18 +3125,23 @@ export class MLElement extends MLParentNode {
      * @param pretenders - Optional array of pretender configurations to match against
      */
     pretending(pretenders) {
+        const renderedParent = this.#getRenderedParent();
+        this.#resolveNamespace(renderedParent);
         // Pretender must not apply to a recognised standard HTML element (e.g. <marquee>,
         // <h1>, <button>). Allowing such elements to masquerade as another would silently
         // mask spec-driven rules — deprecation, ARIA role restrictions, browser support —
         // keyed on the original tag. See issue #3740.
         //
+        // What is recognised is what the document says (`MLDocument#isNativeTag`): the specification, unless
+        // the parser has a rule of its own. Vue's rule does not hold `<marquee>`, which Vue resolves to a
+        // component when one is imported, so there it is pretender-eligible. See issue #4351.
+        //
         // Names that the HTML parser cannot distinguish from typos (PascalCase JSX-like
         // usage in plain HTML such as `<SimpleButton>`) get `elementType === 'html'`
         // from the parser but have no spec entry; those remain pretender-eligible
         // (this is what `pretenders.scan` relies on). The legacy "no inline `as=` on
         // HTML elements" guard is preserved further down for that case.
-        if (this.elementType === 'html' &&
-            getSpecByTagName(this.ownerMLDocument.specs.specs, this.localName, this.namespaceURI) != null) {
+        if (this.elementType === 'html' && this.ownerMLDocument.isNativeTag(this.localName, this.namespaceURI)) {
             return;
         }
         const pretenderConfig = pretenders?.find(option => this.matches(option.selector));
@@ -2896,7 +3157,6 @@ export class MLElement extends MLParentNode {
             return;
         }
         let nodeName;
-        let namespace = 'http://www.w3.org/1999/xhtml';
         const attributes = [];
         let aria;
         if (typeof pretenderElement === 'string') {
@@ -2904,7 +3164,6 @@ export class MLElement extends MLParentNode {
         }
         else {
             nodeName = pretenderElement.element;
-            namespace = pretenderElement.namespace === 'svg' ? 'http://www.w3.org/2000/svg' : namespace;
             if (pretenderElement.inheritAttrs) {
                 attributes.push(...this._astToken.attributes);
             }
@@ -2914,13 +3173,19 @@ export class MLElement extends MLParentNode {
             aria = pretenderElement.aria;
         }
         const slots = typeof pretenderElement === 'string' ? undefined : pretenderElement.slots;
+        // A component is given no name for the namespace, as `#resolveNamespace` does:
+        // `getChildNamespace` compares names in lowercase, so `Svg` would enter SVG.
+        const isComponent = this.ownerMLDocument.isComponentName(nodeName);
+        const namespace = typeof pretenderElement !== 'string' && pretenderElement.namespace
+            ? pretenderNamespaceToURI(pretenderElement.namespace)
+            : this.#getNamespaceInPlace(isComponent ? null : nodeName, renderedParent);
         const as = new _a({
             ...this._astToken,
             uuid: this.uuid + '_pretender',
             raw: `<${nodeName}>`,
             nodeName,
             namespace,
-            elementType: 'html',
+            elementType: isComponent ? 'authored' : 'html',
             attributes,
         }, this.ownerMLDocument);
         // When slots is null, the component does not accept children (void-like).
@@ -2935,7 +3200,7 @@ export class MLElement extends MLParentNode {
             type: 'origin',
             origin: this,
         };
-        const slotContent = typeof pretenderElement === 'string' ? undefined : this.#createSlotContent(pretenderElement, as, namespace);
+        const slotContent = typeof pretenderElement === 'string' ? undefined : this.#createSlotContent(pretenderElement, as);
         this.pretenderContext = {
             type: 'pretender',
             as,
@@ -2964,8 +3229,13 @@ export class MLElement extends MLParentNode {
                 _value = value;
             }
             else if (value != null && 'fromAttr' in value) {
-                const fromAttr = value.fromAttr.toLowerCase();
-                const origin = this.#attributes.find(attr => attr.name.toLowerCase() === fromAttr);
+                // 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),
+                // and the prop declared as `'my-label'` is the same one, so both sides are read so. Elsewhere
+                // the attribute is read as the DOM or the framework reads it (`isNamedBy`).
+                const { fromAttr } = value;
+                const isVue = this.ownerMLDocument.componentNameVariants;
+                const origin = this.#attributes.find(attr => isVue ? vuePropKey(attr.name) === vuePropKey(fromAttr) : attr.isNamedBy(fromAttr));
                 if (!origin && value.omitIfMissing) {
                     return [];
                 }
@@ -3032,7 +3302,7 @@ export class MLElement extends MLParentNode {
      * constructor would otherwise re-register the origin's real close tag under
      * the virtual element.
      */
-    #createVirtualElement(spec, uuid, parentNodeUuid, fallbackNamespace) {
+    #createVirtualElement(spec, uuid, parentNodeUuid, renderedIn) {
         const attributes = [];
         if (spec.inheritAttrs) {
             attributes.push(...this._astToken.attributes);
@@ -3040,13 +3310,23 @@ export class MLElement extends MLParentNode {
         if (spec.attrs) {
             attributes.push(...this.#createPretenderAttrs(spec.attrs, uuid));
         }
+        const isComponent = this.ownerMLDocument.isComponentName(spec.element);
+        let elementType = 'html';
+        if (isComponent) {
+            elementType = 'authored';
+        }
+        else if (spec.element.includes('-')) {
+            elementType = 'web-component';
+        }
         const virtual = new _a({
             ...this._astToken,
             uuid,
             raw: `<${spec.element}>`,
             nodeName: spec.element,
-            namespace: getVirtualNamespace(spec, fallbackNamespace),
-            elementType: spec.element.includes('-') ? 'web-component' : 'html',
+            namespace: spec.namespace
+                ? pretenderNamespaceToURI(spec.namespace)
+                : renderedIn.#getChildNamespace(isComponent ? null : spec.element),
+            elementType,
             attributes,
             childNodes: [],
             pairNodeUuid: null,
@@ -3064,7 +3344,7 @@ export class MLElement extends MLParentNode {
      * the children, so that the children given at the usage site stay the whole
      * content of the outermost element (the bare-string pretender behavior).
      */
-    #createSlotContent(node, as, namespace) {
+    #createSlotContent(node, as) {
         const { slots } = node;
         let wrapper = as;
         let contents = node.contents;
@@ -3073,20 +3353,23 @@ export class MLElement extends MLParentNode {
             if (slots.length > 1 || !slot) {
                 // The wrapper of each child is unknown, so the children are not validated,
                 // but a slot may still render unknown content (which may be a name).
+                this.#sharedWrapper = this.#findSharedWrapper(slots, as);
                 return {
                     wrapper: null,
                     mutable: slots.some(s => s.contents?.some(entry => 'dynamic' in entry) ?? false),
                     fill: (given) => given,
                 };
             }
-            wrapper = this.#createVirtualElement(slot, `${this.uuid}_pretender_slot`, this.uuid, namespace);
+            // The elements between the root and the wrapper are not known, so the wrapper is
+            // taken to be a child of the root unless the definition states its namespace.
+            wrapper = this.#createVirtualElement(slot, `${this.uuid}_pretender_slot`, this.uuid, as);
             contents = slot.contents ?? [{ slot: true }];
         }
         if (!contents) {
             return undefined;
         }
         const entries = contents.map((entry, i) => 'element' in entry
-            ? this.#createVirtualElement(entry, `${this.uuid}_pretender_content_${i}`, wrapper === as ? this.uuid : wrapper.uuid, namespace)
+            ? this.#createVirtualElement(entry, `${this.uuid}_pretender_content_${i}`, wrapper === as ? this.uuid : wrapper.uuid, wrapper)
             : entry);
         return {
             wrapper,
@@ -3372,17 +3655,3 @@ export class MLElement extends MLParentNode {
     }
 }
 _a = MLElement;
-/**
- * The namespace of a virtual element made from a pretender definition.
- * `svg` and `math` are foreign elements wherever they are written, and a
- * definition can only state `namespace: 'svg'`, so the name decides.
- */
-function getVirtualNamespace(spec, fallback) {
-    if (spec.namespace === 'svg' || spec.element === 'svg') {
-        return 'http://www.w3.org/2000/svg';
-    }
-    if (spec.element === 'math') {
-        return 'http://www.w3.org/1998/Math/MathML';
-    }
-    return fallback;
-}

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

@@ -1,7 +1,7 @@
 import { UnexpectedCallError } from '@markuplint/shared';
 export class MLNamedNodeMap extends Array {
     getNamedItem(qualifiedName) {
-        return this.find(attr => attr.name === qualifiedName) ?? null;
+        return this.find(attr => attr.isNamedBy(qualifiedName)) ?? null;
     }
     /**
      * **IT THROWS AN ERROR WHEN CALLING THIS.**

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

@@ -46,11 +46,13 @@ export class NodeStore {
     setNode(astNode, 
     // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
     node) {
-        if (!astNode.uuid) {
+        if (!astNode.uuid && nodeStoreError.enabled) {
             nodeStoreError('UUID is invalid: %s (%s: "%s")', astNode.uuid, astNode.nodeName, astNode.raw);
             nodeStoreError('Invalid node: %O', node);
         }
-        nodeStoreLog('Mapped: %s (%s: "%s")', astNode.uuid, astNode.nodeName, astNode.raw.replaceAll('\n', '⏎').replaceAll('\t', '→'));
+        if (nodeStoreLog.enabled) {
+            nodeStoreLog('Mapped: %s (%s: "%s")', astNode.uuid, astNode.nodeName, astNode.raw.replaceAll('\n', '⏎').replaceAll('\t', '→'));
+        }
         this.#store.set(astNode.uuid, node);
     }
 }

package/lib/ml-dom/node/rule-mapper.js

@@ -20,38 +20,53 @@ export class RuleMapper {
         this.#nodeList = Object.freeze([document, ...document.nodeList]);
     }
     apply() {
-        ruleMapperLog('ruleTree:');
+        if (ruleMapperLog.enabled) {
+            ruleMapperLog('ruleTree:');
+        }
+        const nodeEnabled = ruleMapperNodeLog.enabled;
+        const nodeRuleEnabled = ruleMapperNodeRuleLog.enabled;
         for (const node of this.#nodeList) {
             const rules = this.#ruleMap.get(node.uuid);
             if (!rules) {
                 continue;
             }
-            ruleMapperNodeLog('<%s>', node.nodeName);
+            if (nodeEnabled) {
+                ruleMapperNodeLog('<%s>', node.nodeName);
+            }
             for (const ruleName of Object.keys(rules)) {
                 const rule = rules[ruleName];
                 if (!rule) {
                     continue;
                 }
                 node.rules[ruleName] = rule.rule;
-                ruleMapperNodeRuleLog('[from: %s(%s)] %s: %o', rule.from, rule.specificity, ruleName, rule.rule);
+                if (nodeRuleEnabled) {
+                    ruleMapperNodeRuleLog('[from: %s(%s)] %s: %o', rule.from, rule.specificity, ruleName, rule.rule);
+                }
             }
         }
     }
     set(
     // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
     node, ruleName, rule) {
+        const enabled = ruleMapperLog.enabled;
         const rules = this.#ruleMap.get(node.uuid) ?? {};
         const currentRule = rules[ruleName];
         if (currentRule) {
             const order = compareSpecificity(currentRule.specificity, rule.specificity);
             if (order === 1) {
-                ruleMapperLog("Don't set %o ([%s] vs [%s])", rule, currentRule.specificity, rule.specificity);
+                if (enabled) {
+                    ruleMapperLog("Don't set %o ([%s] vs [%s])", rule, currentRule.specificity, rule.specificity);
+                }
                 return;
             }
-            ruleMapperLog('Unset %o from %s', currentRule, node);
+            if (enabled) {
+                ruleMapperLog('Unset %o from %s', currentRule, node);
+            }
         }
         rules[ruleName] = rule;
         this.#ruleMap.set(node.uuid, rules);
-        ruleMapperLog('Set to %s from %s (%o): %O', node.nodeName, rule.from, rule.specificity, rule.rule);
+        if (enabled) {
+            ruleMapperLog('Set to %s from %s (%o): %O', node.nodeName, rule.from, rule.specificity, rule.rule);
+        }
     }
 }