diff --git a/package.json b/package.json
index a3752633..34a4da0d 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-id-swiper": "2.3.2",
-        "style-scoped": "0.2.2",
         "swiper": "4.5.1"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2a88bd5..97afbc69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,9 +41,6 @@ importers:
       react-id-swiper:
         specifier: 2.3.2
         version: 2.3.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(swiper@4.5.1)
-      style-scoped:
-        specifier: 0.2.2
-        version: 0.2.2
       swiper:
         specifier: 4.5.1
         version: 4.5.1
@@ -2320,9 +2317,6 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  style-scoped@0.2.2:
-    resolution: {integrity: sha512-KOVGTDx6XhrHncmgBQrZBICZVNEfCH+pCO2z1pH9602Vd0zUJ+qONuX0qBba4jS//H1H8lKCc/lxfGG31wlTuQ==}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4902,8 +4896,6 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  style-scoped@0.2.2: {}
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
diff --git a/src/bloom-player-core.tsx b/src/bloom-player-core.tsx
index adca28ee..69a555a2 100644
--- a/src/bloom-player-core.tsx
+++ b/src/bloom-player-core.tsx
@@ -5,8 +5,9 @@ bloom-player-core is responsible for all the behavior of working through a book,
 import * as React from "react";
 import axios from "axios";
 import Swiper, { SwiperInstance } from "react-id-swiper";
-// This loads some JS right here that is a polyfill for the (otherwise discontinued) scoped-styles html feature
-import "style-scoped/scoped.min.js";
+// This loads some JS right here that is a polyfill for the (otherwise discontinued) scoped-styles html feature.
+// We use a patched version that fixes a bug with comma-separated selectors containing attribute selectors.
+import "./scoped-styles-polyfill.js";
 import "swiper/dist/css/swiper.min.css";
 import "./bloom-player-ui.less";
 import "./bloom-player-content.less";
diff --git a/src/scoped-styles-polyfill.js b/src/scoped-styles-polyfill.js
new file mode 100644
index 00000000..c8ae7874
--- /dev/null
+++ b/src/scoped-styles-polyfill.js
@@ -0,0 +1,451 @@
+/*
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+/**
+ * @fileoverview Polyfill for `<style scoped>`.
+ */
+
+// The pure selector-rewriting logic lives in a separate module so it can be unit-tested
+// directly (scoped-styles-polyfill.test.ts) rather than against a duplicated copy.
+import {updateSelectorText} from './scoped-styles-selectors.js';
+
+(function() {
+  const s = document.createElement('style');
+  if ('scoped' in s) {
+    return;  // do nothing
+  }
+
+  const scopedCSSOptions = {
+    'applyToClass': false,
+    'prefix': '__scoped_',
+  };
+
+  // are we in old IE/Firefox mode, where .selectorText can't be changed inline?
+  s.textContent = '.x{color:red;}';
+  document.head.appendChild(s);
+  s.sheet.cssRules[0].selectorText = '.change';
+  const writeMode = s.sheet.cssRules[0].selectorText === '.change';
+  document.head.removeChild(s);
+
+
+  Object.defineProperty(HTMLStyleElement.prototype, 'scoped', {
+    enumerable: true,
+    get() {
+      return this.hasAttribute('scoped');
+    },
+    set(v) {
+      if (v) {
+        this.setAttribute('scoped', this.getAttribute('scoped') || '');
+      } else {
+        this.removeAttribute('scoped');
+      }
+    },
+  });
+
+  /**
+   * @type {!Map<!HTMLStyleElement, {attrName: string, prefix: string, parent: !HTMLElement}>}
+   */
+  const styleNodes = new Map();
+
+
+  function hashCode(s) {
+    let hash = 5381;
+    let j = s.length;
+    while (j) {
+      hash = (hash * 33) ^ s.charCodeAt(--j);
+    }
+    return hash;
+  }
+
+
+  /**
+   * Upgrades a specific CSSRule.
+   *
+   * @param {!CSSRule} rule
+   * @param {string} prefix to apply
+   * @param {!CSSMediaRule|!CSSStyleSheet} group
+   * @param {number} index in group
+   */
+  function upgradeRule(rule, prefix, group, index) {
+    if (rule instanceof CSSMediaRule) {
+      // upgrade children
+      const l = rule.cssRules.length;
+      for (let j = 0; j < l; ++j) {
+        upgradeRule(rule.cssRules[j], prefix, rule, j);
+      }
+      return;
+    }
+
+    if (!(rule instanceof CSSStyleRule)) {
+      return;  // unknown rule type, ignore
+    }
+
+    const update = updateSelectorText(rule.selectorText, prefix);
+
+    if (writeMode) {
+      // anything but old IE/Firefox
+      rule.selectorText = update;
+    } else {
+      // old browsers which don't allow modification of selectorText
+      const cssText = rule.style.cssText;  // save before we delete
+      group.deleteRule(index);
+      group.insertRule(`${update} {${cssText}}`, index);
+    }
+  }
+
+
+  /**
+   * @param {!CSSRule} rule
+   * @return {Node} owner of rule
+   */
+  function ownerNode(rule) {
+    let sheet = rule.parentStyleSheet;
+    while (sheet) {
+      if (sheet.ownerNode) {
+        return sheet.ownerNode;
+      }
+      sheet = sheet.parentStyleSheet;
+    }
+    return null;
+  }
+
+
+  /**
+   * Replaces a live rule, returning the new `CSSRule` that it was replaced with.
+   *
+   * @param {!CSSRule} rule
+   * @param {string} update to replace with
+   * @return {!CSSRule}
+   */
+  function replaceRule(rule, update) {
+    const parent = rule.parentStyleSheet;
+    let i;
+    for (i = 0; i < parent.rules.length; ++i) {
+      if (parent.rules[i] === rule) {
+        break;
+      }
+    }
+    parent.removeRule(i);
+    parent.insertRule(update, i);
+
+    return parent.rules[i];
+  }
+
+
+  /**
+   * @param {!CSSStyleSheet} sheet
+   * @return {?{code: number}} the DOMException found while accessing this CSS
+   */
+  function sheetRulesError(sheet) {
+    // FIXME: This monstrosity just convinces Closure that `sheet.cssRules` has side-effects.
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch (e) {
+      if (e instanceof DOMException) {
+        return e;
+      }
+      throw e;
+    }
+    if (rules) {
+      return null;
+    }
+
+    // Safari no longer throws an error here, just pretend we can't read the data.
+    return {code: DOMException.SECURITY_ERR};
+  }
+
+  // TODO: upgradeSheet could return a Promise or then-like
+
+  /**
+   * @param {!CSSStyleSheet} sheet already loaded CSSStyleSheet
+   * @param {string} prefix to apply
+   * @return {boolean} if applied immediately
+   */
+  const upgradeSheet = (function() {
+
+    /** @type {!WeakMap<!StyleSheet, string>} */
+    const upgradedSheets = new WeakMap();
+
+    /** @type {!Map<!CSSImportRule, string>} */
+    const pendingImportRule = new Map();
+
+    /** @type {!Map<!CSSStyleSheet, string>} */
+    const pendingInvalidSheet = new Map();
+
+    /**
+     * Callback inside rAF to monitor for @import-style loading or for parsing CSS script tags.
+     * This is ugly, but only happens on styles that are moved or inserted dynamically (static
+     * styles all fire at once).
+     */
+    const requestCheck = (function() {
+      let rAF = 0;
+
+      function check() {
+        let again = false;
+        rAF = 0;
+
+        pendingImportRule.forEach((prefix, importRule) => {
+          if (importRule.styleSheet) {
+            internalUpgrade(importRule.styleSheet, prefix);
+          } else if (ownerNode(importRule)) {
+            again = true;
+            return;  // still valid, do nothing
+          }
+          pendingImportRule.delete(importRule);
+        });
+
+        pendingInvalidSheet.forEach((prefix, sheet) => {
+          if (sheetRulesError(sheet)) {
+            again = true;
+            return;
+          }
+          internalUpgrade(sheet, prefix);
+          pendingInvalidSheet.delete(sheet);
+        });
+
+        // check again next frame
+        if (again) {
+          rAF = window.requestAnimationFrame(check);
+        }
+      }
+
+      return function() {
+        rAF = rAF || window.requestAnimationFrame(check);
+      };
+    }());
+
+    /**
+     * @param {!CSSStyleSheet} sheet
+     * @param {string} prefix
+     */
+    function internalUpgrade(sheet, prefix) {
+      if (upgradedSheets.get(sheet) === prefix) {
+        return;  // already done
+      }
+
+      const e = sheetRulesError(sheet);
+      if (e) {
+        switch (e.code) {
+          case DOMException.SECURITY_ERR:
+            // Occurs if we try to examine a cross-domain CSS file. Fetch it ourselves and update
+            // the CSS once it is available on a 'local' URL.
+            const x = new XMLHttpRequest();
+            x.responseType = 'blob';
+            x.open('GET', sheet.href);
+
+            // This must also be replaced with a temporary @import, as @import must all appear
+            // first. Use a base64 URL that doesn't actually contain anything.
+            const rule = replaceRule(
+                /** @type {!CSSRule} */ (sheet.ownerRule),
+                `@import url('data:text/css;base64,')`
+            );
+
+            x.onload = () => {
+              const url = URL.createObjectURL(/** @type {!Blob} */ (x.response));
+              const update = /** @type {!CSSImportRule} */ (replaceRule(rule, `@import '${url}'`));
+              pendingImportRule.set(update, prefix);
+              requestCheck();
+
+              // We can revoke this URL immediately as it's seemingly read synchronously.
+              URL.revokeObjectURL(url);
+            };
+            // nb. no onerror handling
+
+            x.send();
+            return;
+
+          case DOMException.INVALID_ACCESS_ERR:
+            // This occurs in Firefox if the CSS is yet to be parsed (for dynamic cases), see:
+            //   https://bugzilla.mozilla.org/show_bug.cgi?id=761236
+            pendingInvalidSheet.set(sheet, prefix);
+            requestCheck();
+            return;
+
+          default:
+            throw e;
+        }
+      }
+
+      // Hooray, the sheet is ready to go!
+      upgradedSheets.set(sheet, prefix);
+
+      const l = sheet.cssRules.length;
+      for (let i = 0; i < l; ++i) {
+        const rule = sheet.cssRules[i];
+
+        if (!(rule instanceof CSSImportRule)) {
+          upgradeRule(rule, prefix, sheet, i);
+          continue;
+        }
+
+        if (rule.styleSheet) {
+          // TODO: recursion is bad
+          internalUpgrade(rule.styleSheet, prefix);
+          continue;
+        }
+
+        // otherwise, add to pending queue
+        pendingImportRule.set(rule, prefix);
+        requestCheck();
+      }
+
+      return true;
+    }
+
+    return internalUpgrade;
+  }());
+
+
+  /**
+   * @param {!HTMLStyleElement} node to reset
+   */
+  function resetCSS(node) {
+    const css = node.textContent;
+    node.textContent = '';
+    node.textContent = css;
+  }
+
+
+  function applyToAttr(node, attrName, apply) {
+    // default version is to apply to attributes
+    if (apply) {
+      node.setAttribute(attrName, '');
+    } else {
+      node.removeAttribute(attrName);
+    }
+  }
+
+  function applyToClass(node, attrName, apply) {
+    if (apply) {
+      node.classList.add(attrName);
+    } else {
+      node.classList.remove(attrName);
+    }
+  }
+
+
+  let applyMode = applyToAttr;
+  let uniqueId = 0;
+
+
+  function upgrade(node) {
+    const effectiveParent = node['scoped'] && document.body.contains(node) ? node.parentNode : null;
+
+    const state = styleNodes.get(node);
+    if (state) {
+      if (!effectiveParent) {
+        // disappearing, clear state and ask browser to reset CSS
+        styleNodes.delete(node);
+        resetCSS(node);
+      } else if (node.sheet) {
+        // otherwise, upgrade the sheet (succeeds if already done)
+        // nb. node.sheet is null if being removed
+        upgradeSheet(node.sheet, state.prefix);
+      }
+
+      if (state.parent !== effectiveParent) {
+        state.parent && applyMode(state.parent, state.attrName, false);
+        effectiveParent && applyMode(effectiveParent, state.attrName, true);
+        state.parent = effectiveParent;
+      }
+
+      return false;  // already upgraded
+    }
+
+    if (!effectiveParent) {
+      return;  // not scoped CSS, never seen before, ignore
+    }
+
+    // TODO: use hash for deduping
+    // const hash = hashCode(node.textContent);
+
+    // newly found style node, setup attr
+    const attrName = `${scopedCSSOptions['prefix']}${++uniqueId}`
+    const prefix = applyMode === applyToAttr ? `[${attrName}]` : `.${attrName}`;
+    styleNodes.set(node, {attrName, prefix, parent: node.parentNode});
+
+    upgradeSheet(node.sheet, prefix);
+    applyMode(effectiveParent, attrName, true);
+  }
+
+  // this mess basically calls resolve() with any <style> nodes that changed/removed/added
+  // TODO: is it faster to just call getElementsByTagName('style') and compare to previous
+  const mo = new MutationObserver((records) => {
+    const changes = new Set();
+    const iterate = (nodes) => {
+      let i = nodes ? nodes.length : 0;
+      while (i) {
+        const node = nodes[--i];
+        if (!(node instanceof HTMLElement)) {
+          continue;  // text node
+        }
+        if (node instanceof HTMLStyleElement) {
+          changes.add(node);  // directly a <style>
+          continue;
+        }
+        // look for changed children
+        const cand = node.getElementsByTagName('style');
+        let j = cand.length;
+        while (j) {
+          changes.add(cand[--j]);
+        }
+      }
+    };
+
+    records.forEach((record) => {
+      if (record.target instanceof HTMLStyleElement) {
+        changes.add(record.target);
+      } else {
+        iterate(record.addedNodes);
+        iterate(record.removedNodes);
+      }
+    });
+
+    changes.forEach(upgrade);
+  });
+
+  function setup() {
+    // clone any options from global
+    const cand = window['scopedCSS'];
+    if (typeof cand === 'object') {
+      for (let k in scopedCSSOptions) {
+        if (k in cand) {
+          scopedCSSOptions[k] = cand[k];
+        }
+      }
+
+      if (scopedCSSOptions['applyToClass']) {
+        applyMode = applyToClass;
+      }
+    }
+
+    // nb. watch for attributeFilter: ['scoped'] to detect a CSS rule changing at runtime
+    const options = {childList: true, subtree: true, attributes: true, attributeFilter: ['scoped']};
+    mo.observe(document, options);
+    const collection = document.body.getElementsByTagName('style');
+    for (let i = 0; i < collection.length; ++i) {
+      upgrade(collection[i]);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', setup);
+  } else {
+    setup();
+  }
+
+}());
\ No newline at end of file
diff --git a/src/scoped-styles-polyfill.test.ts b/src/scoped-styles-polyfill.test.ts
new file mode 100644
index 00000000..fe003529
--- /dev/null
+++ b/src/scoped-styles-polyfill.test.ts
@@ -0,0 +1,131 @@
+import { describe, it, expect } from "vitest";
+// Import the ACTUAL production logic, so these tests exercise the code that ships
+// (rather than a duplicated copy that could silently drift out of sync).
+import { updateSelectorText } from "./scoped-styles-selectors.js";
+
+describe('Scoped styles polyfill fixes', () => {
+  const prefix = '[__scoped_1]';
+
+  it('should handle simple comma-separated selectors', () => {
+    const input = '.foo, .bar';
+    const result = updateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo, ${prefix} .bar`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle comma-separated selectors with attribute selectors', () => {
+    const input = '.foo[attr], .bar[attr]';
+    const result = updateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo[attr], ${prefix} .bar[attr]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle multiple attribute selectors in comma-separated list', () => {
+    const input = '[attr1], [attr2], [attr3]';
+    const result = updateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} [attr1], ${prefix} [attr2], ${prefix} [attr3]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle complex selectors from SimpleCheckboxQuiz.css', () => {
+    const input = `.bloom-editable.QuizHeader-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after, .bloom-editable.QuizAnswer-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after`;
+    const result = updateSelectorText(input, prefix);
+
+    // Should contain both selectors
+    expect(result).toContain('.bloom-editable.QuizHeader-style');
+    expect(result).toContain('.bloom-editable.QuizAnswer-style');
+
+    // Should have the prefix in the result
+    expect(result).toContain('[__scoped_1]');
+
+    // Most importantly: should not have double spaces (the main bug fix)
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle mixed selectors with and without attribute selectors', () => {
+    const input = '.foo, [attr], .bar[data-test]';
+    const result = updateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo, ${prefix} [attr], ${prefix} .bar[data-test]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle selectors with spaces after commas', () => {
+    const input = '.foo , .bar , .baz';
+    const result = updateSelectorText(input, prefix);
+    // The trimStart removes leading spaces, but spaces around the comma in the original
+    // will be preserved as part of the selector text
+    const parts = result.split(', ');
+    expect(parts.length).toBe(3);
+
+    // Most importantly: should not have double spaces
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle :where() pseudo-selector with attribute selectors (BL issue)', () => {
+    // This is the exact problematic selector from the user
+    const input = `.numberedPage:where([class*="Ebook"]:not(.bloom-interactive-page)),
+.numberedPage:where([class*="Device"]:not(.bloom-interactive-page))`;
+    const result = updateSelectorText(input, prefix);
+
+    // Both selectors should be present
+    expect(result).toContain('.numberedPage:where([class*="Ebook"]');
+    expect(result).toContain('.numberedPage:where([class*="Device"]');
+
+    // Both should get the prefix
+    const prefixCount = (result.match(/\[__scoped_1\]/g) || []).length;
+    expect(prefixCount).toBe(2);
+
+    // Should not have double spaces
+    expect(result).not.toContain('  ');
+
+    // Should not be invalid
+    expect(result).not.toBe(':not(*)');
+  });
+
+  it('should handle selectors starting with attribute selectors (critical bug)', () => {
+    // This matches the exact real-world problem from the user's book
+    const input = `[class*="Ebook"].numberedPage:not(.bloom-interactive-page), [class*="Device"].numberedPage:not(.bloom-interactive-page)`;
+    const result = updateSelectorText(input, prefix);
+
+    // Both should be present
+    expect(result).toContain('Ebook');
+    expect(result).toContain('Device');
+
+    // CRITICAL: Both must have the prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(2);
+    parts.forEach((part: string) => {
+      const prefixPresent = part.includes('[__scoped_1]');
+      expect(prefixPresent).toBe(true);
+    });
+
+    // No double spaces
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle user-reported case with ::after pseudo-element', () => {
+    // This is the exact case the user found where commas were not being detected
+    const input = `.numberedPage[class*="Ebook"]::after, .numberedPage[class*="Device"]::after, .bloomPlayer-page .numberedPage::after`;
+    const result = updateSelectorText(input, prefix);
+
+    // Should have THREE selectors separated by commas, each with the prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(3);
+    parts.forEach((part: string) => {
+      const prefixPresent = part.includes('[__scoped_1]');
+      expect(prefixPresent).toBe(true);
+    });
+  });
+
+  it('should handle ] character inside quoted attribute values', () => {
+    // Ensure ] inside quotes doesn't break attribute matching
+    const input = `[data-content="some]value"], [data-other="test"]`;
+    const result = updateSelectorText(input, prefix);
+
+    // Should have TWO selectors, both with prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(2);
+    expect(parts[0]).toBe(`${prefix} [data-content="some]value"]`);
+    expect(parts[1]).toBe(`${prefix} [data-other="test"]`);
+  });
+});
diff --git a/src/scoped-styles-selectors.js b/src/scoped-styles-selectors.js
new file mode 100644
index 00000000..dd8772d3
--- /dev/null
+++ b/src/scoped-styles-selectors.js
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+/**
+ * @fileoverview Pure selector-rewriting logic for the `<style scoped>` polyfill.
+ *
+ * This was extracted from scoped-styles-polyfill.js so it can be unit-tested
+ * directly (see scoped-styles-polyfill.test.ts) rather than against a duplicated
+ * copy that could silently drift from what actually ships. These functions are
+ * pure string transforms and touch no DOM, so they import cleanly into tests.
+ */
+
+// This matches any valid `[foo="bar"]` block, with either quote style. The regex explicitly
+// handles quoted content to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`) and
+// allows ] inside quoted values (e.g. `[attr="a]b"]`).
+//
+// FIX: The original regex had a greedy `.*` after quoted values that could match across
+// multiple attribute selectors, breaking comma-separated lists. Now we explicitly match:
+// 1. Unquoted content (no brackets or quotes)
+// 2. Quoted strings (allowing ] and escaped quotes inside)
+// 3. Repeat as needed
+// 4. Final unquoted content (no brackets)
+// This ensures we stop at the ] of THIS attribute only, not consume across commas.
+const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
+const walkSelectorRe = /([([,]|:scope\b)/;  // "interesting" setups
+const scopeRe = /^:scope\b/;
+
+/**
+ * Consumes a single selector from candidate selector text, which may contain many.
+ *
+ * @param {string} raw selector text
+ * @param {string} prefix to apply
+ * @return {?{selector: string, rest: string}}
+ */
+export function consumeSelector(raw, prefix) {
+  const startPos = raw.search(/\S/);  // find where actual selector starts (skip leading whitespace)
+  let i = raw.search(walkSelectorRe);
+  if (i === -1) {
+    // found literally nothing interesting, success
+    return {
+      selector: `${prefix} ${raw}`,
+      rest: '',
+    };
+  } else if (raw[i] === ',') {
+    // found comma without anything interesting, yield rest
+    // Extract from startPos to exclude leading whitespace
+    const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
+    return {
+      selector: `${prefix} ${selectorPart}`,
+      rest: raw.substr(i + 1).trimStart(),
+    }
+  }
+
+  let leftmost = true;   // whether we're past a descendant or similar selector
+  let scope = false;     // whether :scope has been found + replaced
+  i = startPos;
+
+  let depth = 0;
+outer:
+  for (; i < raw.length; ++i) {
+    const char = raw[i];
+    switch (char) {
+      case '[':
+        const match = attrRe.exec(raw.substr(i));
+        i += (match ? match[0].length : 1) - 1;  // we add 1 every loop
+        continue;
+
+      case '(':
+        ++depth;
+        continue;
+
+      case ':':
+        if (!leftmost) {
+          continue;  // doesn't matter if :scope is here, it'll always be ignored
+        } else if (!scopeRe.test(raw.substr(i))) {
+          continue;  // not ':scope', ignore
+        } else if (depth) {
+          return null;
+        }
+
+        // Replace ':scope' with our prefix. This can happen many times; ':scope:scope' is valid.
+        // It will never apply to a descendant selector (e.g., ".foo :scope") as this is ignored
+        // by browsers anyway (invalid).
+        raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
+        i += prefix.length;
+        scope = true;
+        --i;  // we'd skip over next character otherwise
+        continue;  // run loop again
+
+      case ')':
+        if (depth) {
+          --depth;
+        }
+        continue;
+    }
+    if (depth) {
+      continue;
+    }
+
+    switch (char) {
+      case ',':
+        break outer;
+
+      case ' ':
+      case '>':
+      case '~':
+      case '+':
+        if (!leftmost) {
+          continue;
+        }
+        leftmost = false;
+    }
+  }
+
+  const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i);
+  return {selector, rest: raw.substr(i + 1).trimStart()};
+}
+
+/**
+ * Rewrites a full (possibly comma-separated) selector list to be scoped under prefix.
+ *
+ * @param {string} selectorText the full selector text of a CSS rule
+ * @param {string} prefix to apply
+ * @return {string}
+ */
+export function updateSelectorText(selectorText, prefix) {
+  const found = [];
+
+  while (selectorText) {
+    const consumed = consumeSelector(selectorText, prefix);
+    if (consumed === null) {
+      return ':not(*)';
+    }
+    found.push(consumed.selector);
+    selectorText = consumed.rest;
+  }
+
+  return found.join(', ');
+}