diff --git a/modules/libpref/init/StaticPrefList.h b/modules/libpref/init/StaticPrefList.h
index 8c78bc920b7d..9f3bc1d74a02 100644
--- a/modules/libpref/init/StaticPrefList.h
+++ b/modules/libpref/init/StaticPrefList.h
@@ -441,6 +441,13 @@ VARCACHE_PREF(
   bool, false
 )
 
+// Does arbitrary ::-webkit-* pseudo-element parsed?
+VARCACHE_PREF(
+  "layout.css.unknown-webkit-pseudo-element",
+   layout_css_unknown_webkit_pseudo_element,
+  bool, false
+)
+
 //---------------------------------------------------------------------------
 // JavaScript prefs
 //---------------------------------------------------------------------------
diff --git a/servo/components/style/gecko/pseudo_element.rs b/servo/components/style/gecko/pseudo_element.rs
index 73fe905ebd8b..b30d7764d176 100644
--- a/servo/components/style/gecko/pseudo_element.rs
+++ b/servo/components/style/gecko/pseudo_element.rs
@@ -14,7 +14,7 @@ use properties::{ComputedValues, PropertyFlags};
 use properties::longhands::display::computed_value::T as Display;
 use selector_parser::{NonTSPseudoClass, PseudoElementCascadeType, SelectorImpl};
 use std::fmt;
-use str::starts_with_ignore_ascii_case;
+use str::{starts_with_ignore_ascii_case, string_as_ascii_lowercase};
 use string_cache::Atom;
 use thin_slice::ThinBoxedSlice;
 use values::serialize_atom_identifier;
diff --git a/servo/components/style/gecko/pseudo_element_definition.mako.rs b/servo/components/style/gecko/pseudo_element_definition.mako.rs
index 2395ff32f786..7c45ee8bfb7c 100644
--- a/servo/components/style/gecko/pseudo_element_definition.mako.rs
+++ b/servo/components/style/gecko/pseudo_element_definition.mako.rs
@@ -13,6 +13,9 @@ pub enum PseudoElement {
         ${pseudo.capitalized_pseudo()},
         % endif
     % endfor
+    /// ::-webkit-* that we don't recognize
+    /// https://github.com/whatwg/compat/issues/103
+    UnknownWebkit(Atom),
 }
 
 /// Important: If you change this, you should also update Gecko's
@@ -47,11 +50,12 @@ PseudoElement::${pseudo.capitalized_pseudo()}${"({})".format(tree_arg) if pseudo
 impl PseudoElement {
     /// Get the pseudo-element as an atom.
     #[inline]
-    pub fn atom(&self) -> Atom {
+    fn atom(&self) -> Atom {
         match *self {
             % for pseudo in PSEUDOS:
                 ${pseudo_element_variant(pseudo)} => atom!("${pseudo.value}"),
             % endfor
+            PseudoElement::UnknownWebkit(..) => unreachable!(),
         }
     }
 
@@ -62,6 +66,7 @@ impl PseudoElement {
             % for i, pseudo in enumerate(PSEUDOS):
             ${pseudo_element_variant(pseudo)} => ${i},
             % endfor
+            PseudoElement::UnknownWebkit(..) => unreachable!(),
         }
     }
 
@@ -105,6 +110,12 @@ impl PseudoElement {
         }
     }
 
+    /// Whether this pseudo-element is an unknown Webkit-prefixed pseudo-element.
+    #[inline]
+    pub fn is_unknown_webkit_pseudo_element(&self) -> bool {
+        matches!(*self, PseudoElement::UnknownWebkit(..))
+    }
+
     /// Gets the flags associated to this pseudo-element, or 0 if it's an
     /// anonymous box.
     pub fn flags(&self) -> u32 {
@@ -123,6 +134,7 @@ impl PseudoElement {
                     structs::SERVO_CSS_PSEUDO_ELEMENT_FLAGS_${pseudo.pseudo_ident},
                 % endif
             % endfor
+            PseudoElement::UnknownWebkit(..) => 0,
         }
     }
 
@@ -143,7 +155,7 @@ impl PseudoElement {
 
     /// Construct a `CSSPseudoElementType` from a pseudo-element
     #[inline]
-    pub fn pseudo_type(&self) -> CSSPseudoElementType {
+    fn pseudo_type(&self) -> CSSPseudoElementType {
         use gecko_bindings::structs::CSSPseudoElementType_InheritingAnonBox;
 
         match *self {
@@ -158,6 +170,7 @@ impl PseudoElement {
                     PseudoElement::${pseudo.capitalized_pseudo()} => CSSPseudoElementType::NonInheritingAnonBox,
                 % endif
             % endfor
+            PseudoElement::UnknownWebkit(..) => unreachable!(),
         }
     }
 
@@ -245,6 +258,15 @@ impl PseudoElement {
                 if starts_with_ignore_ascii_case(name, "-moz-tree-") {
                     return PseudoElement::tree_pseudo_element(name, Box::new([]))
                 }
+                if unsafe {
+                    structs::StaticPrefs_sVarCache_layout_css_unknown_webkit_pseudo_element
+                } {
+                    const WEBKIT_PREFIX: &str = "-webkit-";
+                    if starts_with_ignore_ascii_case(name, WEBKIT_PREFIX) {
+                        let part = string_as_ascii_lowercase(&name[WEBKIT_PREFIX.len()..]);
+                        return Some(PseudoElement::UnknownWebkit(part.into()));
+                    }
+                }
             }
         }
 
@@ -275,6 +297,10 @@ impl ToCss for PseudoElement {
             % for pseudo in PSEUDOS:
                 ${pseudo_element_variant(pseudo)} => dest.write_str("${pseudo.value}")?,
             % endfor
+            PseudoElement::UnknownWebkit(ref atom) => {
+                dest.write_str(":-webkit-")?;
+                serialize_atom_identifier(atom, dest)?;
+            }
         }
         if let Some(args) = self.tree_pseudo_args() {
             if !args.is_empty() {
diff --git a/servo/components/style/stylist.rs b/servo/components/style/stylist.rs
index dbddca725e12..b309fd018d23 100644
--- a/servo/components/style/stylist.rs
+++ b/servo/components/style/stylist.rs
@@ -1881,7 +1881,9 @@ impl ElementAndPseudoRules {
         pseudo_element: Option<&PseudoElement>,
         quirks_mode: QuirksMode,
     ) -> Result<(), FailedAllocationError> {
-        debug_assert!(pseudo_element.map_or(true, |pseudo| !pseudo.is_precomputed()));
+        debug_assert!(pseudo_element.map_or(true, |pseudo| {
+            !pseudo.is_precomputed() && !pseudo.is_unknown_webkit_pseudo_element()
+        }));
 
         let map = match pseudo_element {
             None => &mut self.element_map,
@@ -2194,6 +2196,9 @@ impl CascadeData {
                                     ));
                                 continue;
                             }
+                            if pseudo.is_unknown_webkit_pseudo_element() {
+                                continue;
+                            }
                         }
 
                         let hashes = AncestorHashes::new(&selector, quirks_mode);
diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
index a1a7377f1fc1..bec02b294855 100644
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -324788,6 +324788,12 @@
      {}
     ]
    ],
+   "compat/webkit-pseudo-element.html": [
+    [
+     "/compat/webkit-pseudo-element.html",
+     {}
+    ]
+   ],
    "compat/webkit-text-fill-color-currentColor.html": [
     [
      "/compat/webkit-text-fill-color-currentColor.html",
@@ -434273,6 +434279,10 @@
    "579d88220610e4f2ea7e884018b655cf1c5c8dca",
    "reftest"
   ],
+  "compat/webkit-pseudo-element.html": [
+   "8f69477489a8eee76a6b379f07dcbcafda539c5a",
+   "testharness"
+  ],
   "compat/webkit-text-fill-color-currentColor.html": [
    "f4912c93450edf03b43b220d205460cc82ef9ba2",
    "testharness"
diff --git a/testing/web-platform/meta/compat/webkit-pseudo-element.html.ini b/testing/web-platform/meta/compat/webkit-pseudo-element.html.ini
new file mode 100644
index 000000000000..abd51b776bb1
--- /dev/null
+++ b/testing/web-platform/meta/compat/webkit-pseudo-element.html.ini
@@ -0,0 +1,2 @@
+[webkit-pseudo-element.html]
+  prefs: [layout.css.unknown-webkit-pseudo-element:true]
diff --git a/testing/web-platform/tests/compat/webkit-pseudo-element.html b/testing/web-platform/tests/compat/webkit-pseudo-element.html
new file mode 100644
index 000000000000..8f69477489a8
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-pseudo-element.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>WebKit-prefixed pseudo-elements</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#css-webkit-pseudo-elements">
+<meta name="assert" content="WebKit-prefixed pseudo-elements should always be valid">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id="style">
+#test {
+  color: rgb(255, 0, 0);
+}
+span::-webkit-something-invalid, #test, ::-WeBkIt-sOmEtHiNg-NoNeXiSt123 {
+  color: rgb(0, 255, 0);
+}
+::-webkitfoo, #test {
+  color: rgb(255, 0, 0);
+}
+</style>
+<body>
+<div id="test"></div>
+<script>
+  test(() => {
+    let elem = document.getElementById("test");
+    assert_equals(getComputedStyle(elem).color, "rgb(0, 255, 0)");
+  }, "rules include webkit-prefixed pseudo-element should be cascaded");
+
+  test(() => {
+    let sheet = document.getElementById("style").sheet;
+    assert_equals(sheet.cssRules[1].selectorText,
+                  "span::-webkit-something-invalid, " +
+                  "#test, ::-webkit-something-nonexist123");
+  }, "webkit-prefixed pseudo-element selectors should be accessible from CSSOM");
+
+  test(() => {
+    document.querySelector("span::-webkit-something-invalid");
+    document.querySelectorAll("span::-webkit-something-invalid");
+  }, "qS and qSA shouldn't throw exception");
+
+  test(() => {
+    let sheet = document.getElementById("style").sheet;
+    assert_equals(sheet.cssRules.length, 2);
+    assert_throws("SyntaxError", () => document.querySelector("span::-webkitfoo"));
+    assert_throws("SyntaxError", () => document.querySelectorAll("span::-webkitfoo"));
+  }, "webkit-prefix without dash is invalid");
+</script>
+</body>