Support ::before / ::after on ::slotted pseudos.

See w3c/csswg-drafts#3150 for the issue that would
expand this to all pseudos.

Differential Revision: https://phabricator.services.mozilla.com/D9994

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1502617
gecko-commit: b7ed6370bc7d11c486ca86f74ba7e4bc00b471af
gecko-integration-branch: mozilla-inbound
gecko-reviewers: heycam

css/css-scoping/slotted-with-pseudo-element-ref.html

@@ -5,3 +5,4 @@
 <div>PASS</div>
 <div>PASS</div>
 <div style="color:green">PASS</div>
+<div style="color:green">PASS</div>

css/css-scoping/slotted-with-pseudo-element.html

@@ -7,6 +7,7 @@
 <div id="host1"><span></span></div>
 <div id="host2"><span></span></div>
 <div id="host3"><span></span></div>
+<div id="host4"><span></span></div>
 <style>
   #host3 > span::before { content: "PASS" }
 </style>
@@ -19,4 +20,12 @@
   attachShadowWithSlottedStyle(host1, "::slotted(span)::before { content: 'PASS' }");
   attachShadowWithSlottedStyle(host2, "::slotted(span)::after { content: 'PASS' }");
   attachShadowWithSlottedStyle(host3, "::slotted(span)::before { content: 'FAIL'; color: green }");
+  attachShadowWithSlottedStyle(host4, `
+    ::slotted(span)::before { content: 'PASS'; color: red }
+    ::slotted(.foo)::before { color: green }
+  `);
+  onload = function() {
+    host4.offsetTop;
+    host4.firstElementChild.classList.add("foo");
+  }
 </script>