diff --git a/html/semantics/forms/the-select-element/customizable-select-multiple-popup/selectedcontent-multiple.tentative.html b/html/semantics/forms/the-select-element/customizable-select-multiple-popup/selectedcontent-multiple.tentative.html
index 7ffa75fef581ec..1c7acbff185626 100644
--- a/html/semantics/forms/the-select-element/customizable-select-multiple-popup/selectedcontent-multiple.tentative.html
+++ b/html/semantics/forms/the-select-element/customizable-select-multiple-popup/selectedcontent-multiple.tentative.html
@@ -60,7 +60,7 @@
     .send();
 }
 
-test(() => {
+promise_test(async () => {
   const select = document.getElementById('s1');
   const optionOne = select.querySelector('option.one');
   const optionTwo = select.querySelector('option.two');
@@ -86,6 +86,7 @@
     'The selectedcontent should update after appending a selected option.');
 
   optionOne.remove();
+  await new Promise(queueMicrotask);
   assert_equals(selectedcontent.innerHTML, expectedHtml([optionThree, optionFour]),
     'The selectedcontent should update after removing a selected option.');
 }, '<selectedcontent> should support <select multiple>.');
diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-insertion-removal.html b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-insertion-removal.html
new file mode 100644
index 00000000000000..1ec77a258454a7
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-insertion-removal.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/12096">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select id=select1>
+  <button>
+    <selectedcontent class=sc1></selectedcontent>
+    <selectedcontent class=sc2></selectedcontent>
+  </button>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+promise_test(async () => {
+  const select = document.getElementById('select1');
+  const sc1 = select.querySelector('.sc1');
+  const sc2 = select.querySelector('.sc2');
+  const sc1before = sc1.innerHTML;
+  const sc2before = sc2.innerHTML;
+  sc1.remove();
+  assert_equals(sc1before, sc1.innerHTML,
+    'The selectedcontent element should not be updated when it is removed.');
+  assert_equals(sc2before, sc2.innerHTML,
+    'The selectedcontent element should not be updated when another selectedcontent is removed.');
+}, 'Selectedcontent element removal steps.');
+</script>
+
+<select id=select2>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+promise_test(async () => {
+  const select = document.getElementById('select2');
+  const button = document.createElement('button');
+  window.scinsertion = {};
+
+  const scriptbefore = document.createElement('script');
+  scriptbefore.textContent =
+  `window.scinsertion.selectedcontentbefore
+    = document.getElementById('select2').querySelector('selectedcontent').innerHTML;`;
+  button.appendChild(scriptbefore);
+
+  button.appendChild(document.createElement('selectedcontent'));
+
+  const scriptafter = document.createElement('script');
+  scriptafter.textContent =
+  `window.scinsertion.selectedcontentafter
+    = document.getElementById('select2').querySelector('selectedcontent').innerHTML;`;
+  button.appendChild(scriptafter);
+
+  // We should be able to detect whether the selectedcontent element is updated
+  // in the insertion steps vs the post-connection steps by using the
+  // post-connection steps of script which should be run before and after the
+  // post-connection steps of the selectedcontent element.
+  select.insertBefore(button, select.querySelector('option'));
+  assert_equals(window.scinsertion.selectedcontentbefore, '',
+    'The selectedcontent should be empty before post-connection steps.');
+  assert_equals(window.scinsertion.selectedcontentafter, 'one',
+    'The selectedcontent should be updated after post-connection steps.');
+}, 'Selectedcontent element insertion steps.');
+</script>
+
+<select id=select3>
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option>one</option>
+</select>
+
+<script>
+promise_test(async () => {
+  const select = document.getElementById('select3');
+  const container = document.createElement('div');
+  window.optioninsertion = {};
+
+  const scriptbefore = document.createElement('script');
+  scriptbefore.textContent =
+    `window.optioninsertion.selectedcontentbefore =
+      document.getElementById('select3').querySelector('selectedcontent').innerHTML`;
+  container.appendChild(scriptbefore);
+
+  const newOption = document.createElement('option');
+  newOption.selected = true;
+  newOption.textContent = 'two';
+  container.appendChild(newOption);
+
+  const scriptafter = document.createElement('script');
+  scriptafter.textContent =
+    `window.optioninsertion.selectedcontentafter =
+      document.getElementById('select3').querySelector('selectedcontent').innerHTML`;
+  container.appendChild(scriptafter);
+
+  // See comment in "Selectedcontent element insertion steps" test.
+  select.appendChild(container);
+  assert_equals(window.optioninsertion.selectedcontentbefore, 'one',
+    'The selectedcontent should not be updated yet before option post-connection steps.');
+  assert_equals(window.optioninsertion.selectedcontentafter, 'two',
+    'The selectedcontent should be updated after option post-connection steps.');
+}, 'Option element insertion steps.');
+</script>
+
+<select id=select4>
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option class=one>one</option>
+  <option>two</option>
+</select>
+
+<script>
+promise_test(async () => {
+  const select = document.getElementById('select4');
+  const selectedcontent = select.querySelector('selectedcontent');
+
+  select.querySelector('.one').remove();
+  assert_equals(selectedcontent.innerHTML, 'one',
+    'The selectedcontent element should not be updated synchronously after removal of the selected option.');
+  await new Promise(queueMicrotask);
+  assert_equals(selectedcontent.innerHTML, 'two',
+    'The selectedcontent element should be updated after a microtask.');
+}, 'Option element removal steps.');
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
index ff1b6a1b2b2f33..ffa3569f9ba7af 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
@@ -459,10 +459,10 @@
       "Type: childList | Target: select | Added: [div] | After: #text: \"\"",
       "Type: childList | Target: select | Added: [#text: \"\"] | After: div",
       "Type: childList | Target: div#test7 | Added: [#text: \"\"] | After: select",
-      "Type: childList | Target: selectedcontent | Added: [#text: \"two\"] | Removed: [#text: \"one\"]",
       "Type: childList | Target: select | Added: [option] | After: #text: \"\"",
-      "Type: childList | Target: selectedcontent | Added: [#text: \"three\"] | Removed: [#text: \"two\"]",
+      "Type: childList | Target: selectedcontent | Added: [#text: \"two\"] | Removed: [#text: \"one\"]",
       "Type: childList | Target: select | Added: [option] | After: option",
+      "Type: childList | Target: selectedcontent | Added: [#text: \"three\"] | Removed: [#text: \"two\"]",
       "Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"three\"]"
     ]
   },
@@ -496,6 +496,7 @@
       "Type: childList | Target: div#test8 | Added: [#text: \"\"] | After: select",
       "Type: childList | Target: div#test8 | Removed: [select] | After: #text: \"\" | Before: #text: \"\"",
       "Type: childList | Target: div.container | Added: [select]",
+      "Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"one\"]",
       "Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"one\"]"
     ]
   }
diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedcontent.html b/html/semantics/forms/the-select-element/customizable-select/selectedcontent.html
index 1bdcd4b6c6b1af..cb84109cc95295 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedcontent.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedcontent.html
@@ -87,9 +87,11 @@
     'Re-inserting the <selectedcontent> should make it update its contents.');
 
   optionTwo.remove();
+  await new Promise(queueMicrotask);
   assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
     'The innerHTML of <selectedcontent> should be updated in response to selected <option> removal.');
   optionOne.remove();
+  await new Promise(queueMicrotask);
   assert_equals(selectedcontent.innerHTML, '',
     'The content of <selectedcontent> should be cleared if there is no selected <option>.');
 }, 'The <selectedcontent> element should reflect the HTML contents of the selected <option>.');
