Scopes

Use a scoped build when Trace CSS should style only part of a page, such as an embedded settings panel. Scoped builds use CSS @scope and apply Trace styles inside containers with the trace-css class.

#Load a scoped build

In the Version Picker, turn on Scoped and choose Classless or Full. Add the generated stylesheet link to the page.

#Mark the area to style

<body class="trace-css">
  <section>
    <h2>Settings</h2>
    <label>
      Display name
      <input type="text" />
    </label>
    <button type="button">Save</button>
  </section>
</body>

#Compare the same markup

Both previews load the same scoped stylesheet. The Scoped preview adds class="trace-css" to its <body>, so Trace CSS styles its heading, input, and button.

You can use multiple trace-css containers on the same page. Keep elements that need Trace styles inside a container, including dialogs rendered elsewhere in the DOM by your framework. Host page styles and inherited properties can still affect content inside the scope.