Skip to content

Editorial: modernize mutation observers #1436

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Editorial: modernize mutation observers #1436

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66cc3ce
Editorial: modernize mutation observers
annevk Nov 28, 2025
33f43ac
Update dom.bs
annevk Nov 28, 2025
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
33 changes: 24 additions & 9 deletions dom.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3906,9 +3906,9 @@ must return null.
<dfn id=mutation-observer-list>pending mutation observers</dfn> (a <a for=/>set</a> of zero or more
{{MutationObserver}} objects), which is initially empty.

<div algorithm>
<p>To
<dfn noexport id=queue-a-mutation-observer-compound-microtask>queue a mutation observer microtask</dfn>,
run these steps:
<dfn id=queue-a-mutation-observer-compound-microtask>queue a mutation observer microtask</dfn>:

<ol>
<li><p>If the <a>surrounding agent</a>'s <a>mutation observer microtask queued</a> is true, then
Expand All @@ -3918,8 +3918,10 @@ run these steps:

<li><p><a lt="queue a microtask">Queue</a> a <a>microtask</a> to <a>notify mutation observers</a>.
</ol>
</div>

<p>To <dfn export>notify mutation observers</dfn>, run these steps:
<div algorithm="notify mutation observers">
<p>To <dfn export>notify mutation observers</dfn>:

<ol>
<li><p>Set the <a>surrounding agent</a>'s <a>mutation observer microtask queued</a> to false.
Expand Down Expand Up @@ -3957,6 +3959,7 @@ run these steps:
<dfn event for=HTMLSlotElement>slotchange</dfn>, with its {{Event/bubbles}} attribute set to true,
at <var>slot</var>.
</ol>
</div>

<hr>

Expand Down Expand Up @@ -4088,11 +4091,14 @@ dictionary MutationObserverInit {
returns what was in there.
</dl>

<div algorithm>
<p>The
<dfn constructor for=MutationObserver lt=MutationObserver(callback)><code>new MutationObserver(<var>callback</var>)</code></dfn>
constructor steps are to set <a>this</a>'s <a for=MutationObserver>callback</a> to
<var>callback</var>.
</div>

<div algorithm>
<p>The
<dfn method for=MutationObserver><code>observe(<var>target</var>, <var>options</var>)</code></dfn>
method steps are:
Expand Down Expand Up @@ -4153,7 +4159,9 @@ method steps are:
<a for=MutationObserver>node list</a>.
</ol>
</ol>
</div>

<div algorithm>
<p>The <dfn method for=MutationObserver><code>disconnect()</code></dfn> method steps are:

<ol>
Expand All @@ -4164,7 +4172,9 @@ method steps are:

<li><p><a for=queue>Empty</a> <a>this</a>'s <a for=MutationObserver>record queue</a>.
</ol>
</div>

<div algorithm>
<p>The <dfn method for=MutationObserver><code>takeRecords()</code></dfn> method steps are:

<ol>
Expand All @@ -4175,13 +4185,15 @@ method steps are:

<li><p>Return <var>records</var>.
</ol>
</div>


<h4 id=queueing-a-mutation-record>Queuing a mutation record</h4>

<p>To <dfn noexport>queue a mutation record</dfn> of <var>type</var> for <var>target</var> with
<div algorithm>
<p>To <dfn>queue a mutation record</dfn> of <var>type</var> for <var>target</var> with
<var>name</var>, <var>namespace</var>, <var>oldValue</var>, <var>addedNodes</var>,
<var>removedNodes</var>, <var>previousSibling</var>, and <var>nextSibling</var>, run these steps:
<var>removedNodes</var>, <var>previousSibling</var>, and <var>nextSibling</var>:

<ol>
<li><p>Let <var>interestedObservers</var> be an empty <a for=/>map</a>.
Expand Down Expand Up @@ -4259,18 +4271,21 @@ method steps are:

<li><p><a>Queue a mutation observer microtask</a>.
</ol>
</div>

<p>To <dfn noexport>queue a tree mutation record</dfn> for <var>target</var> with
<var>addedNodes</var>, <var>removedNodes</var>, <var>previousSibling</var>, and
<var>nextSibling</var>, run these steps:
<div algorithm>
<p>To <dfn>queue a tree mutation record</dfn> for <var>target</var> with <var>addedNodes</var>,
<var>removedNodes</var>, <var>previousSibling</var>, and <var>nextSibling</var>:

<ol>
<li><p>Assert: either <var>addedNodes</var> or <var>removedNodes</var> <a for=set>is not empty</a>.
<li><p><a for=/>Assert</a>: either <var>addedNodes</var> or <var>removedNodes</var>
<a for=set>is not empty</a>.

<li><p><a>Queue a mutation record</a> of "<code>childList</code>" for <var>target</var> with
null, null, null, <var>addedNodes</var>, <var>removedNodes</var>, <var>previousSibling</var>,
and <var>nextSibling</var>.
</ol>
</div>


<h4 id=interface-mutationrecord>Interface {{MutationRecord}}</h4>
Expand Down