@markuplint/rules 5.3.0 → 5.5.0

package/lib/label-has-control/index.d.ts

@@ -4,6 +4,23 @@
  * this rule performs — a `<label>` with an excess of descendant controls is
  * `label-no-multiple-controls`'s responsibility, which also accounts for the
  * `for`-references-an-external-control case that this rule does not see.
+ *
+ * An element inside a conditional preprocessor block counts, because the
+ * branch that renders it puts that element in the label's tree:
+ *
+ * > If the `for` attribute is not specified, but the `label` element has a labelable element descendant, then the first such descendant in tree order is the `label` element's labeled control.
+ *
+ * @see https://html.spec.whatwg.org/multipage/forms.html#labeled-control
+ *
+ * `children` does not list that element, because a conditional block is not
+ * flattened into `childNodes`. This rule still treats any element in
+ * `children` or in a `conditionalChildNodes()` branch as enough; it does not
+ * check that the element is labelable.
+ *
+ * A block that is not a fragment and has no `blockBehavior` is neither
+ * flattened nor a branch, so an element that exists only inside it is not
+ * counted. A Svelte `{#snippet}` is that kind of block: its body is a
+ * definition, not a branch rendered where the block is written.
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
 export default _default;

package/lib/label-has-control/index.js

@@ -6,6 +6,23 @@ import meta from './meta.js';
  * this rule performs — a `<label>` with an excess of descendant controls is
  * `label-no-multiple-controls`'s responsibility, which also accounts for the
  * `for`-references-an-external-control case that this rule does not see.
+ *
+ * An element inside a conditional preprocessor block counts, because the
+ * branch that renders it puts that element in the label's tree:
+ *
+ * > If the `for` attribute is not specified, but the `label` element has a labelable element descendant, then the first such descendant in tree order is the `label` element's labeled control.
+ *
+ * @see https://html.spec.whatwg.org/multipage/forms.html#labeled-control
+ *
+ * `children` does not list that element, because a conditional block is not
+ * flattened into `childNodes`. This rule still treats any element in
+ * `children` or in a `conditionalChildNodes()` branch as enough; it does not
+ * check that the element is labelable.
+ *
+ * A block that is not a fragment and has no `blockBehavior` is neither
+ * flattened nor a branch, so an element that exists only inside it is not
+ * counted. A Svelte `{#snippet}` is that kind of block: its body is a
+ * definition, not a branch rendered where the block is written.
  */
 export default createRule({
     meta: meta,
@@ -21,7 +38,17 @@ export default createRule({
             if (el.pretenderContext?.type === 'pretender' && !el.hasAttribute('as')) {
                 return;
             }
-            if (el.children.length === 0 && !el.hasAttribute('for')) {
+            // `for` already associates the label, so the branch walk is wasted there.
+            // `children` already includes elements of an `each` block. A conditional
+            // block is not flattened, so look through its branches only when
+            // `children` is empty. One branch that contains an element is enough:
+            // the branches that never render together stay out of `children`.
+            if (el.hasAttribute('for')) {
+                return;
+            }
+            const hasElementInSomeBranch = el.children.length > 0 ||
+                el.conditionalChildNodes().some(branch => [...branch].some(node => node.is(node.ELEMENT_NODE)));
+            if (!hasElementInSomeBranch) {
                 report({
                     scope: el,
                     message: t('{0} should associate with {1}', t('The "{0*}" {1}', 'label', 'element'), t('a {0}', 'control')),

package/lib/label-no-multiple-controls/index.d.ts

@@ -21,11 +21,10 @@
  * `label-for-references-labelable`. This rule only inspects the label
  * subtree once the target's category has been classified.
  *
- * The `for` target lookup uses `document.querySelectorAll('[id]')` per
- * matching label, not a cached id map. Kept in sync with
- * `label-for-references-labelable` on purpose — the number of `<label>`
- * elements per document is typically small, so a shared id-index would
- * amortize poorly and split rule ownership across a helper module.
+ * The `for` target is resolved as `label-for-references-labelable` does it: in the tree of the
+ * label, so an id in the content of a `template` element is not the target of a label outside of
+ * it. The controls under the label are the ones of its own tree as well: what is in the content of
+ * a `template` element under the label is not a descendant of it.
  */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, null>>;
 export default _default;

package/lib/label-no-multiple-controls/index.js

@@ -1,4 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
+import { getElementByIdInTree } from '../helpers.js';
 import meta from './meta.js';
 /**
  * The HTML LS list of form-control descendants that may appear under a
@@ -48,11 +49,10 @@ const LABELABLE_SELECTOR = [
  * `label-for-references-labelable`. This rule only inspects the label
  * subtree once the target's category has been classified.
  *
- * The `for` target lookup uses `document.querySelectorAll('[id]')` per
- * matching label, not a cached id map. Kept in sync with
- * `label-for-references-labelable` on purpose — the number of `<label>`
- * elements per document is typically small, so a shared id-index would
- * amortize poorly and split rule ownership across a helper module.
+ * The `for` target is resolved as `label-for-references-labelable` does it: in the tree of the
+ * label, so an id in the content of a `template` element is not the target of a label outside of
+ * it. The controls under the label are the ones of its own tree as well: what is in the content of
+ * a `template` element under the label is not a descendant of it.
  */
 export default createRule({
     meta: meta,
@@ -72,7 +72,7 @@ export default createRule({
             const hasExternalLabeledControl = (() => {
                 if (!forAttr || forAttr.isDynamicValue)
                     return false;
-                const target = [...document.querySelectorAll('[id]')].find(candidate => candidate.getAttribute('id') === forAttr.value);
+                const target = getElementByIdInTree(el, forAttr.value, forAttr.isExpressionValue);
                 if (!target)
                     return false;
                 // A descendant with a matching id is still the label's labeled control

package/lib/landmark-roles/roles.d.ts

@@ -1,4 +1,4 @@
-import type { Element } from '@markuplint/ml-core';
+import type { Document, Element } from '@markuplint/ml-core';
 import type { PlainData } from '@markuplint/ml-config';
 /**
  * Shared by the two rules split out of the former `landmark-roles` rule:
@@ -23,6 +23,18 @@ export type RoleSet<O extends PlainData> = {
 export declare function computeLandmarkRoles<O extends PlainData>(document: {
     querySelectorAll(selector: string): Iterable<Element<boolean, O>>;
 }): RoleSet<O>;
+/**
+ * Collects the landmark-role elements of every tree of the document: the document itself, and the
+ * content of each `template` element and each declarative shadow root, which are trees of their own.
+ * Where the content of a `template` ends up in a document is not known from the markup, so its
+ * landmarks are not counted with the ones of the document, nor does an ancestor of the document make
+ * them nested.
+ *
+ * @template O - The rule options type
+ * @param document - The document to search.
+ * @returns The mapping from role to its matched elements, one for each tree.
+ */
+export declare function computeLandmarkRolesOfEachTree<O extends PlainData>(document: Document<boolean, O>): RoleSet<O>[];
 /**
  * Collects all UUIDs of elements that have landmark roles.
  *

package/lib/landmark-roles/roles.js

@@ -60,6 +60,28 @@ document) {
     roles.contentinfo.push(...footers);
     return roles;
 }
+/**
+ * Collects the landmark-role elements of every tree of the document: the document itself, and the
+ * content of each `template` element and each declarative shadow root, which are trees of their own.
+ * Where the content of a `template` ends up in a document is not known from the markup, so its
+ * landmarks are not counted with the ones of the document, nor does an ancestor of the document make
+ * them nested.
+ *
+ * @template O - The rule options type
+ * @param document - The document to search.
+ * @returns The mapping from role to its matched elements, one for each tree.
+ */
+export function computeLandmarkRolesOfEachTree(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+document) {
+    const trees = [document];
+    for (const template of document.deepQuerySelectorAll('template')) {
+        if (template.content) {
+            trees.push(template.content);
+        }
+    }
+    return trees.map(tree => computeLandmarkRoles(tree));
+}
 /**
  * An element already collected through its explicit `role` attribute (e.g.
  * `<header role="banner">`) must not be added a second time by the implicit

package/lib/no-ambiguous-navigable-target-names/index.js

@@ -10,6 +10,10 @@ export default createRule({
             if (!attr.valueNode) {
                 return;
             }
+            // The value of an attribute that is not known, or that is not output, is not a name to judge
+            if (attr.isDynamicValue) {
+                return;
+            }
             const attrSpecs = getAttrSpecs(attr.ownerElement, document.specs);
             if (!attrSpecs) {
                 return;

package/lib/no-aria-on-presentational-children/index.js

@@ -13,7 +13,13 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            report(checkingPresentationalChildren({ el }));
+            for (const attr of el.attributes) {
+                // An attribute that the framework does not output is not an attribute of the element
+                if (attr.isAbsent) {
+                    continue;
+                }
+                report(checkingPresentationalChildren({ attr, el }));
+            }
         });
     },
 });

package/lib/no-aria-on-unsupported-element/index.js

@@ -1,5 +1,5 @@
 import { createRule, getSpec } from '@markuplint/ml-core';
-import { Collection, isAriaAttr } from '../helpers.js';
+import { Collection, getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Extracted from the former `wai-aria` umbrella rule (#3989), which always
@@ -22,7 +22,7 @@ export default createRule({
                 return;
             }
             const roleAttr = el.getAttributeNode('role');
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             const ariaAttrs = new Collection(roleAttr, ...propAttrs);
             for (const ariaAttr of ariaAttrs) {
                 report({

package/lib/no-boolean-attr-value/index.js

@@ -10,7 +10,8 @@ export default createRule({
             if (!attrSpec) {
                 return;
             }
-            if (attr.isDynamicValue) {
+            // The value of an expression is not written as the value of an HTML attribute
+            if (attr.isExpressionValue) {
                 return;
             }
             const name = attr.name;

package/lib/no-broken-fragment-link/index.d.ts

@@ -1,4 +1,9 @@
 /**
+ * The target of a fragment link is an element of the document tree: the content of a `template`
+ * element and a shadow root are not where the navigation scrolls to. So the ids and names are the ones
+ * of the document (`document.querySelectorAll`, not the other trees), and a link in any tree is checked
+ * against them. A dynamic id in the document, not in another tree, stops the check.
+ *
  * Split out of the former `no-refer-to-non-existent-id` rule. Unlike the
  * `DOMID`-typed attributes and ARIA ID references that rule covers, HTML LS
  * does not treat a broken hyperlink fragment as a conformance violation —

package/lib/no-broken-fragment-link/index.js

@@ -4,6 +4,11 @@ import meta from './meta.js';
 /** CSS selector matching hyperlink elements that have an `href` attribute. */
 const HYPERLINK_SELECTOR = 'a[href], area[href]';
 /**
+ * The target of a fragment link is an element of the document tree: the content of a `template`
+ * element and a shadow root are not where the navigation scrolls to. So the ids and names are the ones
+ * of the document (`document.querySelectorAll`, not the other trees), and a link in any tree is checked
+ * against them. A dynamic id in the document, not in another tree, stops the check.
+ *
  * Split out of the former `no-refer-to-non-existent-id` rule. Unlike the
  * `DOMID`-typed attributes and ARIA ID references that rule covers, HTML LS
  * does not treat a broken hyperlink fragment as a conformance violation —
@@ -38,7 +43,8 @@ export default createRule({
                 hasDynamicId = true;
             }
             if (attr.valueType !== 'code') {
-                idList.add(decodeEntities(attr.value));
+                // An expression is code, not markup: its string has no character reference to decode
+                idList.add(attr.isExpressionValue ? attr.value : decodeEntities(attr.value));
             }
         }
         if (hasDynamicId) {
@@ -53,7 +59,7 @@ export default createRule({
                 hasDynamicName = true;
             }
             if (attr.valueType !== 'code') {
-                nameList.add(decodeEntities(attr.value));
+                nameList.add(attr.isExpressionValue ? attr.value : decodeEntities(attr.value));
             }
         }
         await document.walkOn('Element', el => {

package/lib/no-consecutive-br/index.js

@@ -4,7 +4,7 @@ export default createRule({
     meta: meta,
     defaultSeverity: 'warning',
     verify({ document, report, t }) {
-        const brList = [...document.querySelectorAll('br')];
+        const brList = [...document.deepQuerySelectorAll('br')];
         for (const br of brList) {
             let next = br.nextSibling;
             while (next && next.is(next.TEXT_NODE) && !next.nodeValue?.trim()) {

package/lib/no-contradictory-aria-prop/index.js

@@ -2,7 +2,7 @@ import { createRule, ariaSpecs, getAttrSpecs, getSpec } from '@markuplint/ml-cor
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingContradictoryAriaProp } from '../wai-aria/checkings/contradictory-aria-prop.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
-import { isAriaAttr } from '../helpers.js';
+import { getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 /**
  * Split from the former `wai-aria-implicit-props` rule (#3989): the
@@ -21,7 +21,7 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

package/lib/no-default-aria-value/index.js

@@ -2,7 +2,7 @@ import { createRule, ariaSpecs, getSpec } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingDefaultValue } from '../wai-aria/checkings/default-value.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
-import { isAriaAttr } from '../helpers.js';
+import { getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta,
@@ -15,7 +15,7 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

package/lib/no-default-value/index.js

@@ -10,6 +10,10 @@ export default createRule({
             if (!attrSpec) {
                 return;
             }
+            // The value of an attribute that is not known, or that is not output, is not the default value
+            if (attr.isDynamicValue) {
+                return;
+            }
             const spec = findAttrSpec(attrSpec, attr);
             if (!spec) {
                 return;

package/lib/no-deprecated-aria-prop/index.js

@@ -2,7 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingDeprecatedProps } from '../wai-aria/checkings/deprecated-props.js';
 import { defaultOptions } from '../wai-aria/default-options.js';
-import { isAriaAttr } from '../helpers.js';
+import { getAriaAttrs } from '../helpers.js';
 import meta from './meta.js';
 export default createRule({
     meta,
@@ -15,7 +15,7 @@ export default createRule({
                 return;
             if (!elSpec.globalAttrs['#ARIAAttrs'])
                 return;
-            const propAttrs = el.attributes.filter(attr => isAriaAttr(attr));
+            const propAttrs = getAriaAttrs(el);
             if (propAttrs.length === 0)
                 return;
             const ariaVersion = el.rule.options?.version ?? document.ruleCommonSettings?.ariaVersion ?? ARIA_RECOMMENDED_VERSION;

package/lib/no-disallowed-ancestor/index.d.ts

@@ -1,2 +1,17 @@
-declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
+import type { RuleConfigValue } from '@markuplint/ml-core';
+/**
+ * Checks the ancestors of an element against its content model, which holds them in two forms
+ * that this rule reads together: `forbiddenAncestors` (a deny list, any one match is a violation)
+ * and `permittedAncestors` (an allow list, an ancestor that matches none is a violation).
+ * The walk goes up from the parent and reports the nearest ancestor that violates, once.
+ *
+ * It does not enter the content of a `template` element, and it does not judge a node that is not
+ * an element of the document (a fragment, a `template` that a template engine drops): see
+ * {@link getAncestorKind}.
+ *
+ * Known limitation: `:aria(has no name)` in an entry reads a dynamic value of `aria-label` or
+ * `title` as a name, as the accessible name computation does, so `<form aria-label={x}><main>`
+ * is reported although `x` may be empty at runtime and the form then has no name.
+ */
+declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<RuleConfigValue, undefined>>;
 export default _default;

package/lib/no-disallowed-ancestor/index.js

@@ -1,17 +1,43 @@
 import { createRule } from '@markuplint/ml-core';
+import { getSpecByTagName } from '@markuplint/ml-spec';
 import meta from './meta.js';
+/**
+ * Checks the ancestors of an element against its content model, which holds them in two forms
+ * that this rule reads together: `forbiddenAncestors` (a deny list, any one match is a violation)
+ * and `permittedAncestors` (an allow list, an ancestor that matches none is a violation).
+ * The walk goes up from the parent and reports the nearest ancestor that violates, once.
+ *
+ * It does not enter the content of a `template` element, and it does not judge a node that is not
+ * an element of the document (a fragment, a `template` that a template engine drops): see
+ * {@link getAncestorKind}.
+ *
+ * Known limitation: `:aria(has no name)` in an entry reads a dynamic value of `aria-label` or
+ * `title` as a name, as the accessible name computation does, so `<form aria-label={x}><main>`
+ * is reported although `x` may be empty at runtime and the form then has no name.
+ */
 export default createRule({
     meta: meta,
     async verify({ document, report, t }) {
         await document.walkOn('Element', el => {
-            const elSpec = document.specs.specs.find(s => s.name === el.localName);
-            const forbiddenAncestors = elSpec?.contentModel?.forbiddenAncestors;
-            if (!forbiddenAncestors || forbiddenAncestors.length === 0) {
+            const contentModel = getSpecByTagName(document.specs.specs, el.localName, el.namespaceURI)?.contentModel;
+            const forbiddenAncestors = contentModel?.forbiddenAncestors ?? [];
+            const permittedAncestors = contentModel?.permittedAncestors;
+            if (forbiddenAncestors.length === 0 && !permittedAncestors) {
                 return;
             }
             let ancestor = el.parentElement;
             while (ancestor) {
-                if (forbiddenAncestors.some(selector => ancestor.matches(selector))) {
+                const kind = getAncestorKind(ancestor);
+                if (kind === 'template-content') {
+                    break;
+                }
+                if (kind === 'transparent') {
+                    ancestor = ancestor.parentElement;
+                    continue;
+                }
+                const current = ancestor;
+                if (forbiddenAncestors.some(selector => current.matches(selector)) ||
+                    (permittedAncestors && !matchesPermitted(current, permittedAncestors))) {
                     report({
                         scope: el,
                         message: t('{0} must not appear as a descendant of {1}', t('the "{0}" {1}', el.localName, 'element'), t('the "{0}" {1}', ancestor.localName, 'element')),
@@ -23,3 +49,51 @@ export default createRule({
         });
     },
 });
+/**
+ * What `ancestor` is for the walk up the tree.
+ *
+ * - `template-content`: an HTML `template` element (`isHTMLTemplateElement`). The elements in its
+ *   content belong to a separate `DocumentFragment`, so they have no ancestors in the document:
+ *   `<section><template><main></main></template></section>` has a `main` element with none.
+ *   markuplint holds the content as children of the `template` element, so the walk stops here.
+ *   A `template` of a framework that puts the children in the element itself (React, Vue: the
+ *   `templateContent` of its spec) is an `element` below: the children are in the document.
+ * - `transparent`: a node that is not an element of the document, which the walk skips as if it
+ *   were not there and does not judge:
+ *   - a fragment (`<>` of JSX), which `childNodes` already flattens;
+ *   - a `template` element with a directive attribute (Vue's `<template v-if>`, `v-for`, `v-slot`).
+ *     It is not an HTML `template` element: the template engine renders its children in place of
+ *     it and drops it.
+ * - `element`: any other element.
+ *
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
+ */
+function getAncestorKind(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+ancestor) {
+    if (ancestor.isFragment) {
+        return 'transparent';
+    }
+    if (ancestor.localName !== 'template') {
+        return 'element';
+    }
+    for (const attr of ancestor.attributes) {
+        if (attr.isDirective) {
+            return 'transparent';
+        }
+    }
+    return ancestor.isHTMLTemplateElement ? 'template-content' : 'element';
+}
+/**
+ * Whether `ancestor` matches an entry of `permittedAncestors`.
+ *
+ * `#custom` is not a selector: the element decides it, as the `:model()` pseudo-class does
+ * for the `#custom` of a content model category (`isCustomElement` follows the pretender).
+ * It is read only here: in `forbiddenAncestors` every entry is a selector, so `#custom` there
+ * is an id selector.
+ */
+function matchesPermitted(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+ancestor, selectors) {
+    return selectors.some(selector => (selector === '#custom' ? ancestor.isCustomElement : ancestor.matches(selector)));
+}

package/lib/no-disallowed-attr/index.js

@@ -14,6 +14,10 @@ export default createRule({
             if (attr.isDirective) {
                 return;
             }
+            // An attribute that the framework does not output (`async={false}`) is not an attribute of the element
+            if (attr.isAbsent) {
+                return;
+            }
             const name = attr.name;
             const attrName = attr.nameNode;
             // https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

package/lib/no-duplicate-dt/index.js

@@ -4,7 +4,7 @@ export default createRule({
     meta: meta,
     defaultSeverity: 'warning',
     verify({ document, report, t }) {
-        const dlList = [...document.querySelectorAll('dl')];
+        const dlList = [...document.deepQuerySelectorAll('dl')];
         for (const dl of dlList) {
             const dtList = [...dl.querySelectorAll(':scope > dt, :scope > div > dt')];
             const names = new Set();

package/lib/no-duplicate-h1/index.js

@@ -15,27 +15,31 @@ export default createRule({
     defaultOptions: {
         'in-document-fragment': false,
     },
-    async verify({ document, report, t }) {
-        const h1Stack = [];
+    verify({ document, report, t }) {
         if (document.nodeList.length === 0) {
             return;
         }
         if (!document.rule.options['in-document-fragment'] && document.isFragment) {
             return;
         }
-        await document.walkOn('Element', node => {
-            if (node.nodeName.toLowerCase() === 'h1') {
-                h1Stack.push(node);
+        // The h1 elements are counted by tree: the content of a `template` element and a declarative
+        // shadow root are trees of their own, where it is not known from the markup where they are inserted
+        const h1sOfTree = new Map();
+        for (const h1 of document.deepQuerySelectorAll('h1')) {
+            const root = h1.getRootNode();
+            h1sOfTree.set(root, [...(h1sOfTree.get(root) ?? []), h1]);
+        }
+        for (const h1Stack of h1sOfTree.values()) {
+            const duplicated = h1Stack[1];
+            if (duplicated) {
+                const message = t('{0} is {1:c}', t('the "{0*}" {1}', 'h1', 'element'), 'duplicated');
+                report({
+                    message,
+                    line: duplicated.startLine,
+                    col: duplicated.startCol,
+                    raw: duplicated.raw,
+                });
             }
-        });
-        if (h1Stack.length > 1 && h1Stack[1]) {
-            const message = t('{0} is {1:c}', t('the "{0*}" {1}', 'h1', 'element'), 'duplicated');
-            report({
-                message,
-                line: h1Stack[1].startLine,
-                col: h1Stack[1].startCol,
-                raw: h1Stack[1].raw,
-            });
         }
     },
 });

package/lib/no-duplicate-id/index.d.ts

@@ -1,2 +1,11 @@
+/**
+ * An id is unique in its tree, not in the file: the content of a `template` element and a
+ * declarative shadow root are trees of their own, where an id may repeat one of another tree.
+ * The ids are grouped by `getRootNode()`, and compared after the character references are
+ * resolved (`ab` is `ab`), as the DOM has them.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ * @see https://dom.spec.whatwg.org/#concept-tree
+ */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, undefined>>;
 export default _default;

package/lib/no-duplicate-id/index.js

@@ -1,18 +1,37 @@
 import { createRule } from '@markuplint/ml-core';
+import { getDOMValue } from '../helpers.js';
 import meta from './meta.js';
+/**
+ * An id is unique in its tree, not in the file: the content of a `template` element and a
+ * declarative shadow root are trees of their own, where an id may repeat one of another tree.
+ * The ids are grouped by `getRootNode()`, and compared after the character references are
+ * resolved (`ab` is `ab`), as the DOM has them.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ * @see https://dom.spec.whatwg.org/#concept-tree
+ */
 export default createRule({
     meta: meta,
     async verify({ document, report, t }) {
         const message = t('{0} is {1:c}', t('{0} of {1}', t('the {0}', 'value'), t('the "{0*}" {1}', 'id', 'attribute')), 'duplicated');
-        const idStack = [];
+        const idsOfTree = new Map();
         await document.walkOn('Element', node => {
             const idAttrs = node.getAttributeToken('id');
             for (const idAttr of idAttrs) {
                 if (idAttr.isDynamicValue || idAttr.isDirective) {
                     continue;
                 }
-                const id = idAttr.value;
-                if (idStack.includes(id)) {
+                const id = getDOMValue(idAttr);
+                if (id == null) {
+                    continue;
+                }
+                const root = node.getRootNode();
+                let ids = idsOfTree.get(root);
+                if (!ids) {
+                    ids = new Set();
+                    idsOfTree.set(root, ids);
+                }
+                if (ids.has(id)) {
                     report({
                         scope: node,
                         message,
@@ -21,7 +40,7 @@ export default createRule({
                         raw: idAttr.raw,
                     });
                 }
-                idStack.push(id);
+                ids.add(id);
             }
         });
     },

package/lib/no-empty-table-track/index.js

@@ -18,7 +18,7 @@ import meta from './meta.js';
 export default createRule({
     meta,
     verify({ document, report, t }) {
-        const tables = document.querySelectorAll('table');
+        const tables = document.deepQuerySelectorAll('table');
         for (const table of tables) {
             const grid = new Grid(table);
             if (grid.hasOverlapped()) {

package/lib/no-ineffective-attr/index.js

@@ -7,6 +7,10 @@ export default createRule({
     defaultSeverity: 'warning',
     async verify({ document, report, t }) {
         await document.walkOn('Attr', attr => {
+            // An attribute that the framework does not output (`defer={false}`) is not an attribute of the element
+            if (attr.isAbsent) {
+                return;
+            }
             const attrSpec = getAttrSpecs(attr.ownerElement, document.specs);
             if (!attrSpec) {
                 return;