Бесшовные многоразовые модели.

Конструктивные таблицы стилей — это способ создания и распространения многократно используемых стилей при использовании теневого DOM .

Создание таблиц стилей с помощью JavaScript всегда было возможно. Однако исторически этот процесс заключался в создании элемента <style> с помощью document.createElement('style') , а затем в обращении к его свойству sheet для получения ссылки на базовый экземпляр CSSStyleSheet . Этот метод может приводить к дублированию кода CSS и, как следствие, к раздуванию кода, а добавление стиля приводит к появлению нестилизованного контента независимо от наличия раздувания. Интерфейс CSSStyleSheet является корнем набора интерфейсов представления CSS, называемых CSSOM , и предлагает программный способ управления таблицами стилей, а также устраняет проблемы, связанные со старым методом.

Конструктивные таблицы стилей позволяют определять и подготавливать общие стили CSS, а затем легко и без дублирования применять эти стили к нескольким теневым корням или документу. Обновления общей таблицы стилей CSS применяются ко всем корням, в которые она была принята, а принятие таблицы стилей происходит быстро и синхронно после ее загрузки.

Взаимосвязь, создаваемая Constructable Stylesheets, хорошо подходит для множества различных приложений. Её можно использовать для предоставления централизованной темы, используемой многими компонентами: тема может представлять собой экземпляр CSSStyleSheet , передаваемый компонентам, при этом обновления темы автоматически распространяются на компоненты. Её можно использовать для распределения значений пользовательских свойств CSS по определенным поддеревьям DOM без использования каскадного добавления. Её даже можно использовать в качестве прямого интерфейса к парсеру CSS браузера, что упрощает предварительную загрузку таблиц стилей без их внедрения в DOM.

Создание таблицы стилей

Вместо введения нового API для решения этой задачи, спецификация Constructable StyleSheets позволяет создавать таблицы стилей императивным способом, вызывая конструктор CSSStyleSheet() . Полученный объект CSSStyleSheet имеет два новых метода, которые делают добавление и обновление правил таблиц стилей более безопасным без срабатывания эффекта «вспышки нестилизованного контента» (FOUC). Методы replace() и replaceSync() заменяют таблицу стилей строкой CSS, а replace() возвращает Promise. В обоих случаях внешние ссылки на таблицы стилей не поддерживаются — любые правила @import игнорируются и приводят к предупреждению.

const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });
// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

Использование созданных таблиц стилей

Вторая новая функция, представленная Constructable StyleSheets, — это свойство adoptedStyleSheets, доступное для Shadow Roots и Documents . Оно позволяет явно применять стили, определенные в CSSStyleSheet к заданному поддереву DOM. Для этого мы устанавливаем свойство в массив из одного или нескольких таблиц стилей, которые будут применены к этому элементу.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

Собираем всё воедино

Благодаря Constructable StyleSheets у веб-разработчиков теперь есть явное решение для создания CSS-таблиц стилей и их применения к DOM-деревьям. У нас есть новый API на основе промисов для загрузки таблиц стилей из строки исходного кода CSS, использующий встроенный в браузер парсер и семантику загрузки. Наконец, у нас есть механизм для применения обновлений таблиц стилей ко всем случаям использования таблицы стилей, упрощающий такие вещи, как изменение темы и цветовых предпочтений.

Посмотреть демоверсию

Взгляд в будущее

Первоначальная версия Constructable Stylesheets поставлялась с описанным здесь API, но ведётся работа по упрощению использования. Предлагается расширить FrozenArray adoptedStyleSheets специальными методами для вставки и удаления таблиц стилей, что позволит избежать необходимости клонирования массивов и потенциального дублирования ссылок на таблицы стилей.

Более подробная информация

• Статус платформы Chrome
• Пример
• API
• Пояснительная записка
• Намерение реализовать
• Намерение отправить
• Дискурс