Skip to content

Commit 5f4ef6f

Browse files
Feat: data-* attribute page for MathMLElement documentation (#41430)
* Fix data-* attribute links in MathMLElement.dataset documentation - Change incorrect MathML reference paths to correct HTML paths - Update both inline link and See also section - data-* attributes are HTML global attributes, not MathML-specific * Update MathMLElement pages to reference MathML-specific data-* attributes - Fix typo: 'Valuez' -> 'Value' in dataset property documentation - Add reference to MathML data-* global attributes page in parent MathMLElement page - Both pages now correctly point to the hypothetical MathML data-* page instead of HTML version - Addresses reviewer feedback to create consistent MathML-specific documentation * point to hypothetical page * Delete .vscode/settings.json * Simplify MathMLElement.dataset description to reference MathML data-* directly - Remove HTML-specific wording and comparisons - Make it clear that MathML defines its own data-* attributes normatively - Follows the same pattern as SVG which has its own data-* page - References MathML spec: https://w3c.github.io/mathml/#parsing_wellformed (MathMLDataAttributes) * Add MathML data-* global attributes page - Create comprehensive data-* documentation for MathML following SVG pattern - Includes proper MathML-specific examples and references - Links to MathMLElement.dataset property and DOM interface - Follows XML naming rules and restrictions - Addresses the missing page that MathMLElement.dataset was referencing - Based on normative MathML spec: https://w3c.github.io/mathml/#parsing_wellformed * fix eq
1 parent f904814 commit 5f4ef6f

File tree

3 files changed

+57
-2
lines changed

3 files changed

+57
-2
lines changed

files/en-us/web/api/mathmlelement/dataset/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ A {{domxref("DOMStringMap")}}.
2323
<math>
2424
<msup id="equation" data-value="-1" data-equation="euler">
2525
<mi>e</mi>
26-
<mi></mi>
26+
<mrow><mi>i</mi> <mi>π</mi></mrow>
2727
</msup>
2828
<mo>+</mo>
2929
<mn>1</mn>

files/en-us/web/api/mathmlelement/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}_.
2020
- {{DOMxRef("MathMLElement.autofocus")}}
2121
- : Whether the control should be focused when the page loads, or when a {{htmlelement("dialog")}} or [popover](/en-US/docs/Web/HTML/Reference/Global_attributes/popover) become shown.
2222
- {{DOMxRef("MathMLElement.dataset")}} {{ReadOnlyInline}}
23-
- : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Web/HTML/How_to/Use_data_attributes) attached to the element. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) global attribute.
23+
- : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Web/HTML/How_to/Use_data_attributes) attached to the element. These correspond to MathML's [`data-*`](/en-US/docs/Web/MathML/Reference/Global_attributes/data-*) global attributes.
2424
- {{DOMxRef("MathMLElement.style")}}
2525
- : A {{DOMxRef("CSSStyleDeclaration")}} representing the declarations of the element's `style` attribute.
2626
- {{DOMxRef("MathMLElement.tabIndex")}}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: data-*
3+
slug: Web/MathML/Reference/Global_attributes/data-*
4+
page-type: mathml-attribute
5+
browser-compat: mathml.global_attributes.data_attributes
6+
sidebar: mathmlref
7+
---
8+
9+
The **`data-*`** MathML attributes are called custom data attributes. They let MathML markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the {{domxref("MathMLElement")}} interface of the element the attributes belong to, with the {{domxref("MathMLElement.dataset")}} property.
10+
11+
The `*` can be replaced by any characters allowed in [XML's rules for names](https://www.w3.org/TR/xml/#NT-Name), with the following restrictions:
12+
13+
- Can't start with `xml`.
14+
- No semicolons (`;`, `U+003A`).
15+
- No capital `A` to `Z` letters.
16+
17+
> [!NOTE]
18+
> The {{domxref("MathMLElement.dataset")}} property is a {{domxref("DOMStringMap")}} that provides the attribute `data-test-value` via `MathMLElement.dataset.testValue`. Hyphen characters (`-`, `U+002D`) are removed and the next letter is capitalized, resulting in the {{Glossary("camel_case", "camel case")}} format.
19+
20+
You can use this attribute with any MathML element.
21+
22+
## Example
23+
24+
```html
25+
<math>
26+
<msup data-formula="euler" data-value="-1">
27+
<mi>e</mi>
28+
<mrow><mi>i</mi> <mi>π</mi></mrow>
29+
</msup>
30+
<mo>+</mo>
31+
<mn>1</mn>
32+
<mo>=</mo>
33+
<mn>0</mn>
34+
</math>
35+
```
36+
37+
```js
38+
const msupElement = document.querySelector("msup");
39+
console.log(msupElement.dataset.formula); // "euler"
40+
console.log(msupElement.dataset.value); // "-1"
41+
```
42+
43+
## Specifications
44+
45+
{{Specifications}}
46+
47+
## Browser compatibility
48+
49+
{{Compat}}
50+
51+
## See also
52+
53+
- {{domxref("MathMLElement")}}
54+
- The {{domxref("MathMLElement.dataset")}} property used to access these attributes from scripts.
55+
- [Using data attributes](/en-US/docs/Web/HTML/How_to/Use_data_attributes)

0 commit comments

Comments
 (0)