@markuplint/rules 5.4.0 → 5.6.0

package/lib/no-nested-top-level-landmark/index.js

@@ -1,5 +1,5 @@
 import { createRule } from '@markuplint/ml-core';
-import { computeLandmarkRoles, landmarkRoleElementUUIDList } from '../landmark-roles/roles.js';
+import { computeLandmarkRolesOfEachTree, landmarkRoleElementUUIDList } from '../landmark-roles/roles.js';
 import meta from './meta.js';
 /**
  * Roles this rule requires to be top-level landmarks — not nested inside any
@@ -29,22 +29,25 @@ export default createRule({
         if (document.isFragment) {
             return;
         }
-        const roles = computeLandmarkRoles(document);
-        const uuidList = landmarkRoleElementUUIDList(roles);
-        for (const role of topLevelRoles) {
-            const elements = roles[role];
-            for (const el of elements) {
-                if (el.rule.disabled) {
-                    continue;
-                }
-                if (el.rule.options.ignoreRoles?.includes(role)) {
-                    continue;
-                }
-                if (el.isDescendantByUUIDList(uuidList)) {
-                    report({
-                        scope: el,
-                        message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
-                    });
+        // Landmarks are nested in a landmark of their own tree: the content of a `template` element is
+        // a tree of its own, so a landmark outside of it does not make what is in it nested
+        for (const roles of computeLandmarkRolesOfEachTree(document)) {
+            const uuidList = landmarkRoleElementUUIDList(roles);
+            for (const role of topLevelRoles) {
+                const elements = roles[role];
+                for (const el of elements) {
+                    if (el.rule.disabled) {
+                        continue;
+                    }
+                    if (el.rule.options.ignoreRoles?.includes(role)) {
+                        continue;
+                    }
+                    if (el.isDescendantByUUIDList(uuidList)) {
+                        report({
+                            scope: el,
+                            message: t('{0} should be {1}', t('the "{0*}" {1}', role, 'role'), 'top level'),
+                        });
+                    }
                 }
             }
         }

package/lib/no-prohibited-naming/index.js

@@ -2,7 +2,7 @@ import { createRule, getComputedRole, ariaSpecs, getSpec } from '@markuplint/ml-
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
 import { checkingProhibitedNaming } from '../wai-aria/checkings/prohibited-naming.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-disallowed-props` rule (#3989): the naming-
@@ -23,7 +23,7 @@ export default createRule({
                 return;
             if (elSpec && !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-redundant-accessible-name/index.js

@@ -1,7 +1,13 @@
 import { createRule, getComputedRole } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION, isExposed } from '@markuplint/ml-spec';
-import { accnameMayBeMutable, getOwnedLabel } from '../helpers.js';
+import { accnameMayBeMutable, getElementByIdInTree, getOwnedLabel } from '../helpers.js';
 import meta from './meta.js';
+/**
+ * Labels are names (shown as written, `{n*}`) except `content`, which is a word and is translated.
+ */
+function showLabel(t, label) {
+    return label === 'content' ? t('content') : label;
+}
 export default createRule({
     meta,
     defaultSeverity: 'warning',
@@ -13,7 +19,7 @@ export default createRule({
         await document.walkOn('Element', el => {
             const ariaVersion = ARIA_RECOMMENDED_VERSION;
             // Skip mutable elements (template expressions etc.)
-            if (accnameMayBeMutable(el, document)) {
+            if (accnameMayBeMutable(el)) {
                 return;
             }
             // Skip hidden elements
@@ -32,7 +38,7 @@ export default createRule({
                 for (const loser of overridden) {
                     report({
                         scope: el,
-                        message: t('The accessible name from "{0*}" overrides "{1*}"', winner.label, loser.label),
+                        message: t('The accessible name from "{0*}" overrides "{1*}"', showLabel(t, winner.label), showLabel(t, loser.label)),
                     });
                 }
             }
@@ -61,13 +67,14 @@ computed) {
     //
     // Known limitation: step 2C (Embedded Control) is not modeled, so a self-referencing
     // textbox, combobox, listbox or range is treated like any other element.
-    const ariaLabelledby = el.getAttribute('aria-labelledby');
-    if (ariaLabelledby && ariaLabelledby.trim()) {
+    const ariaLabelledbyAttr = el.getAttributeNode('aria-labelledby');
+    const ariaLabelledby = ariaLabelledbyAttr?.value;
+    if (ariaLabelledbyAttr && ariaLabelledby && ariaLabelledby.trim()) {
         const ids = ariaLabelledby.trim().split(/\s+/);
         // An IDREF resolves to the first element with that id, so with duplicate ids a
         // reference only counts as self-referencing when this element is that first match.
-        const isSelfReferencing = ids.some(id => id === el.id && document.querySelector(`[id="${id}"]`) === el);
-        const hasResolvableId = ids.some(id => document.querySelector(`[id="${id}"]`));
+        const isSelfReferencing = ids.some(id => getElementByIdInTree(el, id, ariaLabelledbyAttr.isExpressionValue) === el);
+        const hasResolvableId = ids.some(id => getElementByIdInTree(el, id, ariaLabelledbyAttr.isExpressionValue));
         if (hasResolvableId && !isSelfReferencing) {
             sources.push({ label: 'aria-labelledby' });
         }
@@ -78,7 +85,7 @@ computed) {
         sources.push({ label: 'aria-label' });
     }
     // 3. label (explicit or implicit) — only for labelable elements
-    const ownedLabel = getOwnedLabel(el, document);
+    const ownedLabel = getOwnedLabel(el);
     if (ownedLabel) {
         sources.push({ label: 'label' });
     }

package/lib/no-redundant-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 { checkingRedundantAriaProp } from '../wai-aria/checkings/redundant-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
@@ -22,7 +22,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-refer-to-non-existent-id/index.d.ts

@@ -1,4 +1,19 @@
 import type { ARIAVersion } from '@markuplint/ml-spec';
+/**
+ * Reports a reference (an attribute of the `DOMID` type, or an ARIA property of the ID reference
+ * type) to an id that does not exist.
+ *
+ * An id is resolved in the tree of the reference: the document, the content of a `template` element
+ * and a declarative shadow root are trees of their own. The reference and the id are compared with
+ * the character references in the markup resolved.
+ *
+ * What it cannot tell it does not report: a document with a template-language block is skipped, an id
+ * that is not known until it is rendered (a dynamic value) suppresses the report in its tree only, and
+ * a `template` that is in no tree (a declarative shadow root is attached to its parent, or may be)
+ * refers to nothing.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ */
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<import("@markuplint/ml-core").RuleConfigValue, {
     ariaVersion: ARIAVersion | undefined;
 }>>;

package/lib/no-refer-to-non-existent-id/index.js

@@ -1,35 +1,55 @@
 import { createRule, getAttrSpecs, ariaSpecs } from '@markuplint/ml-core';
 import { ARIA_RECOMMENDED_VERSION } from '@markuplint/ml-spec';
-import { decodeEntities } from '@markuplint/shared';
-import { findAttrSpec } from '../helpers.js';
+import { findAttrSpec, getDOMValue } from '../helpers.js';
 import meta from './meta.js';
+/**
+ * Reports a reference (an attribute of the `DOMID` type, or an ARIA property of the ID reference
+ * type) to an id that does not exist.
+ *
+ * An id is resolved in the tree of the reference: the document, the content of a `template` element
+ * and a declarative shadow root are trees of their own. The reference and the id are compared with
+ * the character references in the markup resolved.
+ *
+ * What it cannot tell it does not report: a document with a template-language block is skipped, an id
+ * that is not known until it is rendered (a dynamic value) suppresses the report in its tree only, and
+ * a `template` that is in no tree (a declarative shadow root is attached to its parent, or may be)
+ * refers to nothing.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
+ */
 export default createRule({
     meta: meta,
     defaultOptions: {
         ariaVersion: undefined,
     },
     async verify({ document, report, t }) {
-        const idList = new Set();
-        let hasDynamicId = false;
+        // An id is resolved in the tree of the reference: the document, the content of a `template`
+        // element and a declarative shadow root are trees of their own
+        const idListOfTree = new Map();
+        const treesWithDynamicId = new Set();
         const isMutable = document.nodeList.some(node => node.is(node.MARKUPLINT_PREPROCESSOR_BLOCK));
         if (isMutable) {
             return;
         }
-        for (const el of document.querySelectorAll('[id]')) {
+        for (const el of document.deepQuerySelectorAll('[id]')) {
             const attr = el.getAttributeNode('id');
             if (!attr) {
                 continue;
             }
+            const root = el.getRootNode();
             if (attr.isDynamicValue) {
-                hasDynamicId = true;
+                treesWithDynamicId.add(root);
             }
-            if (attr.valueType !== 'code') {
-                idList.add(decodeEntities(attr.value));
+            const id = attr.valueType === 'code' ? null : getDOMValue(attr);
+            if (id != null) {
+                let idList = idListOfTree.get(root);
+                if (!idList) {
+                    idList = new Set();
+                    idListOfTree.set(root, idList);
+                }
+                idList.add(id);
             }
         }
-        if (hasDynamicId) {
-            return;
-        }
         await document.walkOn('Attr', attr => {
             const attrSpec = getAttrSpecs(attr.ownerElement, document.specs);
             if (!attrSpec) {
@@ -41,7 +61,16 @@ export default createRule({
             if (attr.nameKey === 'id') {
                 return;
             }
-            const value = attr.value;
+            const root = attr.ownerElement.getRootNode();
+            // An element in no tree (a `template` that a declarative shadow root is attached to) refers
+            // to nothing, and an id that is not known until it is rendered may be what the reference means
+            if (root === attr.ownerElement || treesWithDynamicId.has(root)) {
+                return;
+            }
+            const idList = idListOfTree.get(root) ?? new Set();
+            // The value is split before the character references are resolved: ` ` is not a separator
+            const decode = (id) => getDOMValue(attr, id) ?? id;
+            const value = decode(attr.value);
             const spec = findAttrSpec(attrSpec, attr);
             if (spec) {
                 // DOMID and DOMID List do not become in the array type.
@@ -58,10 +87,11 @@ export default createRule({
                     });
                 }
                 if (typeof spec.type !== 'string' && 'separator' in spec.type && spec.type.token === 'DOMID') {
-                    const refs = value
+                    const refs = attr.value
                         .split(spec.type.separator === 'space' ? /\s/ : ',')
                         .map(id => id.trim())
-                        .filter(Boolean);
+                        .filter(Boolean)
+                        .map(id => decode(id));
                     for (const ref of refs) {
                         if (!idList.has(ref)) {
                             report({
@@ -88,10 +118,11 @@ export default createRule({
                     });
                 }
                 else if (aria.value === 'ID reference list') {
-                    const refs = value
+                    const refs = attr.value
                         .split(/\s/)
                         .map(id => id.trim())
-                        .filter(Boolean);
+                        .filter(Boolean)
+                        .map(id => decode(id));
                     for (const ref of refs) {
                         if (!idList.has(ref)) {
                             report({

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

@@ -2,6 +2,7 @@ import { createRule } from '@markuplint/ml-core';
 import { check, isEnum, isPattern } from '@markuplint/types';
 import { attrCheck } from '../attr-check.js';
 import { createNameOptionLookup } from '../helpers.js';
+import { noTranslate } from '../no-translate.js';
 import meta from './meta.js';
 export default createRule({
     meta: meta,
@@ -73,7 +74,7 @@ type) {
         return t('{0} is matched with the below disallowed patterns: {1}', t('the "{0*}" {1}', name, 'attribute'), type.pattern);
     }
     if (typeof type !== 'string' && isEnum(type)) {
-        return t('{0} is disallowed to accept the following values: {1}', t('the "{0*}" {1}', name, 'attribute'), t(type.enum));
+        return t('{0} is disallowed to accept the following values: {1}', t('the "{0*}" {1}', name, 'attribute'), t(type.enum.map(noTranslate)));
     }
     return t('{0} is disallowed', t('{0} of {1}', t('the {0}', 'type'), t('the "{0*}" {1}', name, 'attribute')));
 }

package/lib/no-restricted-element/index.js

@@ -4,8 +4,10 @@ export default createRule({
     meta: meta,
     defaultValue: [],
     async verify({ document, report, t }) {
+        // A restricted element is restricted wherever it is: the content of a `template` element and a
+        // declarative shadow root are searched as well
         for (const query of document.rule.value) {
-            const elements = document.querySelectorAll(query);
+            const elements = document.deepQuerySelectorAll(query);
             for (const el of elements) {
                 const message = t('{0} is disallowed', t('the "{0*}" {1}', query, 'element'));
                 report({
@@ -19,7 +21,7 @@ export default createRule({
                 return;
             }
             for (const query of el.rule.value) {
-                const elements = el.querySelectorAll(query);
+                const elements = el.deepQuerySelectorAll(query);
                 for (const found of elements) {
                     const message = t('{0} is disallowed', t('the "{0*}" {1}', query, 'element'));
                     report({

package/lib/no-skipped-heading-level/index.js

@@ -15,17 +15,22 @@ export default createRule({
     meta: meta,
     defaultOptions: null,
     verify({ document, report, t }) {
-        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-        let prevLevel = null;
+        // The content of a `template` element and a declarative shadow root are trees of their own, and
+        // where they are inserted is not known from the markup: the headings of each tree are the
+        // sequence that the heading lead is judged in, as the headings of the document are.
+        const headings = document.deepQuerySelectorAll('h1, h2, h3, h4, h5, h6');
+        const prevLevelOfTree = new Map();
         for (const heading of headings) {
             const level = Number.parseInt(heading.nodeName.slice(1));
-            if (prevLevel !== null && prevLevel + 1 < level) {
+            const root = heading.getRootNode();
+            const prevLevel = prevLevelOfTree.get(root);
+            if (prevLevel !== undefined && prevLevel + 1 < level) {
                 report({
                     scope: heading,
                     message: t('{0} must not be skipped', t('Heading levels')),
                 });
             }
-            prevLevel = level;
+            prevLevelOfTree.set(root, level);
         }
     },
 });

package/lib/no-stray-head-or-body-tag/index.d.ts

@@ -4,7 +4,8 @@
  * > A start tag whose tag name is "body": Parse error. If the stack of open
  * > elements has only one node on it, or if the second element on the stack
  * > of open elements is not a body element, or if there is a template
- * > element on the stack of open elements, then ignore the token. […]
+ * > element on the stack of open elements, or if the parser's fragment parser
+ * > abort requested is true, then ignore the token. […]
  * > Otherwise: Set the frameset-ok flag to "not ok" […]
  *
  * "in body" insertion mode, "Any other end tag":

package/lib/no-stray-head-or-body-tag/index.js

@@ -19,7 +19,8 @@ const DUPLICATE_BODY_START_TAG = /<body(?=[\s/>])/i;
  * > A start tag whose tag name is "body": Parse error. If the stack of open
  * > elements has only one node on it, or if the second element on the stack
  * > of open elements is not a body element, or if there is a template
- * > element on the stack of open elements, then ignore the token. […]
+ * > element on the stack of open elements, or if the parser's fragment parser
+ * > abort requested is true, then ignore the token. […]
  * > Otherwise: Set the frameset-ok flag to "not ok" […]
  *
  * "in body" insertion mode, "Any other end tag":
@@ -52,13 +53,13 @@ export default createRule({
             if (STRAY_HEAD_END_TAG.test(text.raw)) {
                 report({
                     scope: text,
-                    message: t('{0} detected', t('a stray "{0}" end tag', 'head')),
+                    message: t('{0} detected', t('a stray "{0*}" end tag', 'head')),
                 });
             }
             if (DUPLICATE_BODY_START_TAG.test(text.raw)) {
                 report({
                     scope: text,
-                    message: t('{0} detected', t('a duplicate "{0}" start tag', 'body')),
+                    message: t('{0} detected', t('a duplicate "{0*}" start tag', 'body')),
                 });
             }
         });

package/lib/no-table-cell-overlap/index.js

@@ -1,5 +1,6 @@
 import { createRule } from '@markuplint/ml-core';
 import { Grid } from '../table-row-column-alignment/grid.js';
+import { noTranslate } from '../no-translate.js';
 import meta from './meta.js';
 /**
  * HTML LS [§4.9.12.1 *Forming a table*](https://html.spec.whatwg.org/multipage/tables.html#forming-a-table)
@@ -14,7 +15,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()) {
@@ -22,7 +23,7 @@ export default createRule({
                     scope: table,
                     message: t(
                     //
-                    '{0} are causing {1}', t(['rowspan', 'colspan'], true), 'cell overlap'),
+                    '{0} are causing {1}', t(['rowspan', 'colspan'].map(noTranslate), true), 'cell overlap'),
                 });
             }
         }

package/lib/no-table-span-overflow/index.js

@@ -14,7 +14,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-translate.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Marks a value so that the translator of `@markuplint/i18n` shows it as written.
+ *
+ * The translator looks a placeholder's value up as a keyword (`list` is `リスト` with `locale: 'ja'`),
+ * and so it does each item of a list, `t(['row', 'list'])`. A placeholder written `{n*}` is not
+ * translated, but a list has no such mark: an item that is data (a role name, an attribute value, a
+ * token the author wrote) is wrapped in `%…%`, the translator's own form of "not a keyword".
+ *
+ * The translator reads `%…%` around a whole value as that mark and `%%` at an end as one `%`, so a
+ * value that has a `%` at an end is written with it doubled: `%list%` is shown as `%list%`, not
+ * `list`. A `%` inside a value needs nothing, as no keyword has one. An empty value is returned as
+ * it is: wrapped, `%%` would be read back as a stray `%`.
+ *
+ * @param value - The text to show as written
+ * @returns The text for an item of a list, or for a placeholder, given to `t()`
+ */
+export declare function noTranslate(value: string): string;

package/lib/no-translate.js

@@ -0,0 +1,29 @@
+/**
+ * Marks a value so that the translator of `@markuplint/i18n` shows it as written.
+ *
+ * The translator looks a placeholder's value up as a keyword (`list` is `リスト` with `locale: 'ja'`),
+ * and so it does each item of a list, `t(['row', 'list'])`. A placeholder written `{n*}` is not
+ * translated, but a list has no such mark: an item that is data (a role name, an attribute value, a
+ * token the author wrote) is wrapped in `%…%`, the translator's own form of "not a keyword".
+ *
+ * The translator reads `%…%` around a whole value as that mark and `%%` at an end as one `%`, so a
+ * value that has a `%` at an end is written with it doubled: `%list%` is shown as `%list%`, not
+ * `list`. A `%` inside a value needs nothing, as no keyword has one. An empty value is returned as
+ * it is: wrapped, `%%` would be read back as a stray `%`.
+ *
+ * @param value - The text to show as written
+ * @returns The text for an item of a list, or for a placeholder, given to `t()`
+ */
+export function noTranslate(value) {
+    if (value === '') {
+        return value;
+    }
+    if (!value.includes('%')) {
+        return `%${value}%`;
+    }
+    // `%%` is the escaped form of one `%` at an end, so a lone `%` is a single escaped one
+    if (value === '%') {
+        return '%%';
+    }
+    return value.replace(/^%/, '%%').replace(/%$/, '%%');
+}

package/lib/no-unclosed-element-at-eof/index.js

@@ -89,7 +89,7 @@ export default createRule({
                 return;
             report({
                 scope: el,
-                message: t('{0} is not closed at the end of the file', t('the "{0}" {1}', el.localName, 'element')),
+                message: t('{0} is not closed at the end of the file', t('the "{0*}" {1}', el.localName, 'element')),
             });
         });
     },

package/lib/no-unescaped-char/index.js

@@ -49,7 +49,7 @@ export default createRule({
             const ms = severity === 'error' ? 'must' : 'should';
             const message = t(`{0} ${ms} {1}`, 'Illegal characters', 'escape in character reference');
             for (const attr of node.attributes) {
-                if (attr.isDynamicValue || attr.isDirective) {
+                if (attr.isExpressionValue || attr.isDirective) {
                     continue;
                 }
                 const valueNode = attr.valueNode;

package/lib/no-unsupported-browser-features/index.d.ts

@@ -1,3 +1,5 @@
+import type { UnsupportedResult } from './compat-data.js';
+import { createRule } from '@markuplint/ml-core';
 /**
  * Options for the `no-unsupported-browser-features` rule.
  */
@@ -17,3 +19,10 @@ type Options = {
 };
 declare const _default: Readonly<import("@markuplint/ml-core").RuleSeed<boolean, Options>>;
 export default _default;
+/**
+ * Format an unsupported feature message listing affected browsers.
+ *
+ * The double-underscore prefix marks this as exposed only for testing: the browsers a feature
+ * was removed from are not reachable through the data of the dependencies.
+ */
+export declare function __formatUnsupportedMessage(t: Parameters<Parameters<typeof createRule>[0]['verify']>[0]['t'], featureName: string, featureType: string, unsupported: readonly UnsupportedResult[]): string;

package/lib/no-unsupported-browser-features/index.js

@@ -34,7 +34,7 @@ export default createRule({
                 if (unsupported.length > 0) {
                     report({
                         scope: el,
-                        message: formatUnsupportedMessage(t, elName, 'element', unsupported),
+                        message: __formatUnsupportedMessage(t, elName, 'element', unsupported),
                     });
                 }
             }
@@ -53,7 +53,7 @@ export default createRule({
                         line: attr.nameNode?.startLine,
                         col: attr.nameNode?.startCol,
                         raw: attr.nameNode?.raw,
-                        message: formatUnsupportedMessage(t, attrName, 'attribute', unsupported),
+                        message: __formatUnsupportedMessage(t, attrName, 'attribute', unsupported),
                     });
                 }
             }
@@ -63,18 +63,21 @@ export default createRule({
 });
 /**
  * Format an unsupported feature message listing affected browsers.
+ *
+ * The double-underscore prefix marks this as exposed only for testing: the browsers a feature
+ * was removed from are not reachable through the data of the dependencies.
  */
-function formatUnsupportedMessage(t, featureName, featureType, unsupported) {
+export function __formatUnsupportedMessage(t, featureName, featureType, unsupported) {
     const browserDetails = unsupported
         .map(u => {
         if (u.addedVersion === false) {
             if (u.removedVersion) {
-                return `${u.displayName} (removed in ${u.removedVersion})`;
+                return t('{0*} (removed in {1*})', u.displayName, u.removedVersion);
             }
-            return `${u.displayName} (not supported)`;
+            return t('{0*} (not supported)', u.displayName);
         }
-        return `${u.displayName} (added in ${u.addedVersion}, target: ${u.targetVersion})`;
+        return t('{0*} (added in {1*}, target: {2*})', u.displayName, u.addedVersion, u.targetVersion);
     })
         .join(', ');
-    return t('{0} is not supported in {1}', t('the "{0*}" {1}', featureName, featureType), browserDetails);
+    return t('{0} is not supported in {1*}', t('the "{0*}" {1}', featureName, featureType), browserDetails);
 }

package/lib/permitted-contents/content-model.d.ts

@@ -40,6 +40,20 @@ export declare function resolveContentModel(el: Element, rules: readonly TagRule
  * @returns Whether the rule is written for the element
  */
 export declare function hasTagRule(el: Element, rule: TagRule): boolean;
+/**
+ * Whether the user's tag rules include one written for the element whose content model governs
+ * the children of `el` (see {@link getContentOwner}).
+ *
+ * Such a rule lists the components that the element takes by the name that they are written with,
+ * and the components are evaluated by it. Without one, a component that no pretender resolved renders
+ * something that is not known, and what holds whatever it renders is the only thing to report.
+ *
+ * @param el - The element whose children are validated
+ * @param rules - The user's tag rules
+ * @param mode - Which identity to resolve against
+ * @returns Whether a tag rule is written for the element
+ */
+export declare function hasUserTagRule(el: Element, rules: readonly TagRule[], mode: Mode): boolean;
 /**
  * Returns a Specs object that merges the base ML spec with user-defined
  * tag rules. Results are cached by the specs of the document and the serialized rules to avoid redundant

package/lib/permitted-contents/content-model.js

@@ -41,7 +41,8 @@ el, rules, options, mode) {
             },
         ];
     }
-    const result = start(model, el, rules, specs, options, mode);
+    const ignoreUnresolvedComponents = options.ignoreHasMutableChildren && !hasUserTagRule(el, rules, mode);
+    const result = start(model, el, rules, specs, options, mode, ignoreUnresolvedComponents);
     return result;
 }
 /**
@@ -124,6 +125,25 @@ export function hasTagRule(
 el, rule) {
     return rule.tag === el.rawName || el.matchesTagNameVariant(rule.tag);
 }
+/**
+ * Whether the user's tag rules include one written for the element whose content model governs
+ * the children of `el` (see {@link getContentOwner}).
+ *
+ * Such a rule lists the components that the element takes by the name that they are written with,
+ * and the components are evaluated by it. Without one, a component that no pretender resolved renders
+ * something that is not known, and what holds whatever it renders is the only thing to report.
+ *
+ * @param el - The element whose children are validated
+ * @param rules - The user's tag rules
+ * @param mode - Which identity to resolve against
+ * @returns Whether a tag rule is written for the element
+ */
+export function hasUserTagRule(
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+el, rules, mode) {
+    const owner = getContentOwner(el, mode);
+    return rules.some(rule => hasTagRule(owner, rule));
+}
 /**
  * Cache for merged specs: for each base spec of a document, keyed by the JSON-serialized tag rules.
  * Avoids re-merging the same set of user-defined tag rules on every element check.