diff --git a/dom/html/CustomStateSet.cpp b/dom/html/CustomStateSet.cpp
index 97b3aa651ca5..bb3621b195fa 100644
--- a/dom/html/CustomStateSet.cpp
+++ b/dom/html/CustomStateSet.cpp
@@ -81,14 +81,19 @@ void CustomStateSet::Add(const nsAString& aState, ErrorResult& aRv) {
     return;
   }
 
+  nsTArray<RefPtr<nsAtom>>& states = mTarget->EnsureCustomStates();
   RefPtr<nsAtom> atom = NS_AtomizeMainThread(aState);
+  if (states.Contains(atom)) {
+    return;
+  }
+
   Document* doc = mTarget->GetComposedDoc();
   PresShell* presShell = doc ? doc->GetPresShell() : nullptr;
   if (presShell) {
     presShell->CustomStatesWillChange(*mTarget);
   }
 
-  mTarget->EnsureCustomStates().AppendElement(atom);
+  states.AppendElement(atom);
 
   if (presShell) {
     presShell->CustomStateChanged(*mTarget, atom);
diff --git a/testing/web-platform/tests/custom-elements/state/state-css-selector.html b/testing/web-platform/tests/custom-elements/state/state-css-selector.html
index 4c80ecbd4a21..8ead8d780964 100644
--- a/testing/web-platform/tests/custom-elements/state/state-css-selector.html
+++ b/testing/web-platform/tests/custom-elements/state/state-css-selector.html
@@ -99,6 +99,19 @@
         assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     }, "state selector only applies to has() on given ident");
 
+    test(function(t) {
+        myCE.elementInternals.states.add('--green');
+        myCE.elementInternals.states.add('--green');
+        myCE.elementInternals.states.add('--green');
+        t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
+        assert_true(myCE.elementInternals.states.has('--green'));
+        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(0, 255, 0)');
+        assert_true(myCE.elementInternals.states.delete('--green'));
+        assert_false(myCE.elementInternals.states.has('--green'));
+        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
+        assert_false(myCE.elementInternals.states.delete('--green'));
+    }, "states added multiple times counts as one");
+
     test(function(t) {
         myCE.elementInternals.states.add('--green');
         myCE.elementInternals.states.add('--foo');