Области действия

Используйте сборку с ограниченной областью, когда Trace CSS должен оформить лишь часть страницы, например встроенную панель настроек. Такая сборка использует CSS @scope и применяет стили внутри контейнеров с классом trace-css.

#Подключение сборки с ограниченной областью

На странице Выбор версии включите Ограниченная область и выберите Без классов или Полная. Добавьте полученную ссылку на стили на страницу.

#Разметка области действия

<body class="trace-css">
  <section>
    <h2>Настройки</h2>
    <label>
      Отображаемое имя
      <input type="text" />
    </label>
    <button type="button">Сохранить</button>
  </section>
</body>

#Сравнение одинаковой разметки

Оба примера подключают стили с ограниченной областью. В примере с областью на <body> добавлен class="trace-css", поэтому Trace CSS оформляет заголовок, поле и кнопку.

На одной странице можно использовать несколько контейнеров trace-css. Размещайте внутри контейнера все элементы, которым нужны стили Trace, включая диалоги, которые фреймворк выводит в другом месте DOM. Стили страницы и наследуемые свойства могут влиять на контент области.