Skip to content

Add Marker interface #1447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
foolip wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add Marker interface #1447

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff53e03
Add Marker interface
foolip Jan 22, 2026
577e5d0
Marker includes NonDocumentTypeChildNode
foolip Jan 27, 2026
592ac68
Add nodeName #marker and NodeFilter constant SHOW_MARKER
foolip Jan 27, 2026
8c6de01
Define cloning Marker nodes
foolip Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions dom.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4421,6 +4421,7 @@ interface Node : EventTarget {
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12; // legacy
const unsigned short MARKER_NODE = 13;
Copy link

@WebReflection WebReflection Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love it, happy to provide a polyfill around this too, in case nobody else is already working on it

Copy link

@WebReflection WebReflection Jan 22, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module">
    class Marker extends CharacterData {
      get nodeType() {
        return 13;
      }
      hasAttribute(name) {
        return new RegExp(` ${name}(=(['"])?(.*)?\\2)?`).test(this.data);
      }
      getAttribute(name) {
        return this.hasAttribute(name) ? RegExp.$3 : null;
      }
    }

    const promoted = new WeakSet;
    const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
    let node;
    while (node = tw.nextNode()) {
      if (!promoted.has(node) && /^(start|end|marker)(?:$|\s+)/.test(node.data)) {
        promoted.add(node);
        const kind = RegExp.$1;
        Object.setPrototypeOf(node, Marker.prototype);
        console.log({ name: node.getAttribute('name') });
      }
    }
  </script>
</head>
<body>
  <!start>
  O
  <!marker name=unquoted>
  <!marker name="double quoted">
  <!marker name='single quoted'>
  <!marker-nope name="value">
  <!nope name="value">
  K
  <!end>
</body>
</html>

now, I've no idea how people out there are supposed to distinguish <!marker> from <!--marker-->, as example, but the polyfill would take those starting content for granted and produce a Marker node already.

Copy link

@WebReflection WebReflection Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

forgot the devtools result:

image

readonly attribute unsigned short nodeType;
readonly attribute DOMString nodeName;

Expand Down Expand Up @@ -4520,6 +4521,9 @@ get a direct instance of it.

<dt>{{DocumentFragment}}
<dd><code>{{Node}} . {{Node/DOCUMENT_FRAGMENT_NODE}}</code> (11).

<dt>{{Marker}}
<dd><code>{{Node}} . {{Node/MARKER_NODE}}</code> (13).
</dl>

<dt><code><var>node</var> . {{Node/nodeName}}</code>
Expand Down Expand Up @@ -4586,6 +4590,9 @@ statement, switching on the interface <a>this</a> <a>implements</a>:

<dt>{{DocumentFragment}}
<dd><dfn const for=Node>DOCUMENT_FRAGMENT_NODE</dfn> (11).

<dt>{{Marker}}
<dd><dfn const for=Node>MARKER_NODE</dfn> (13).
</dl>

<p>The <dfn attribute for=Node>nodeName</dfn> getter steps are to return the first matching
Expand Down Expand Up @@ -8550,6 +8557,42 @@ constructor steps are to set <a>this</a>'s <a for=CharacterData>data</a> to <var
</div>


<h3 id=interface-marker>Interface {{Marker}}</h3>

<pre class=idl>
enum MarkerType { "marker", "start", "end" };

[Exposed=Window]
interface Marker : Node {
constructor(MarkerType type, optional DOMString name = "");

readonly attribute MarkerType type;
readonly attribute DOMString name;
};
</pre>
Copy link
Contributor

@noamr noamr Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should also include mixin NonDocumentTypeChildNode I think.

Copy link

@WebReflection WebReflection Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

polyfill updated


<dl class=domintro>
<dt><code><var ignore>marker</var> = new <a constructor lt="Marker()">Marker(<var>type</var> [, <var>name</var> = ""])</a></code>
<dd>Returns a new {{Marker}} <a for=/>node</a> whose <a for=Marker>type</a> is <var>type</var> and
<a for=Marker>name</a> is <var>name</var>.
</dl>

<p>{{Marker}} <a for=/>nodes</a> are simply known as
<dfn export id=concept-marker lt="marker">markers</dfn>.

<p><a>Markers</a> have an associated
<dfn export id=concept-marker-type for=Marker>type</dfn> and
<dfn export id=concept-marker-name for=Marker>name</dfn>.

<div algorithm>
<p>The <dfn constructor for=Marker lt="Marker(type)"><code>new Marker(<var>type</var>, <var>name</var>)</code></dfn>
constructor steps are to set <a>this</a>'s <a for=Marker>type</a> to <var>type</var>, <a>this</a>'s
<a for=Marker>name</a> to <var>name</var>, and <a>this</a>'s <a for=Node>node document</a> to
<a>current global object</a>'s <a>associated <code>Document</code></a>.
</div>




<h2 id=ranges>Ranges</h2>

Expand Down