The background of this test is to see the performance impact of @scope in CSS and whether it could be a valid replacement for CSS-in-JS solutions designed to solve the global namespacing problem.

Pick a test:

  1. @scope without prelude, duplicated per component
    (this imagines our ideal world with no requirement for a build process, where we prevent any clashes by using preludeless scopes)
  2. @scope with prelude, duplicated per component
    (this imagines a similar world with no build process, but we use a class name for our prelude, meaning we effectively have redundant duplicate <style> tags)
  3. @scope with prelude, without duplication
    (this is akin to a basic build process removing the duplicate <style> tags or rendering logic that outputs them on the first occurance of each component, a kind of half-way house between no build tooling and CSS-in-JS)
  4. unscoped, regular class name selection, without duplication
    (this provides our baseline, akin to what CSS-in-JS might output)

Test developed by Ryan Townsend