Встраивание стилей в компонент

В библиотеке Slim.js управление стилями компонентов осуществляется напрямую через возможности самого компонента, что обеспечивает инкапсуляцию и локальность CSS. Каждый компонент может содержать собственные стили, которые не будут конфликтовать с глобальными стилями страницы.

Атрибут style в компоненте

Самый простой способ добавить стили — использовать атрибут style в шаблоне компонента:

Slim.tag('my-button', class extends Slim {
  get template() {
    return `
      <button style="background-color: blue; color: white; padding: 10px 20px;">
        Нажми меня
      </button>
    `;
  }
});

Особенности подхода:

  • Стили применяются только к элементу, указанному в шаблоне.
  • Не создают глобальных правил.
  • Ограничены возможностями inline CSS (отсутствие селекторов, псевдоклассов).

Встроенные стили через <style>

Более гибкий и рекомендуемый способ — использование тега <style> внутри шаблона. Он позволяет описывать полноценные CSS-правила и поддерживает scope компонентов.

Slim.tag('color-box', class extends Slim {
  get template() {
    return `
      <style>
        div {
          width: 100px;
          height: 100px;
          background-color: red;
          border: 2px solid black;
        }

        div:hover {
          background-color: orange;
        }
      </style>
      <div></div>
    `;
  }
});

Преимущества метода:

  • Возможность использовать селекторы, псевдоклассы и псевдоэлементы.
  • Стили привязаны к компоненту и не влияют на другие элементы страницы.
  • Упрощается поддержка и изменение внешнего вида компонента.

Динамическое изменение стилей

Slim.js позволяет изменять стили компонентов динамически через JavaScript. Для этого можно использовать метод this.shadowRoot или прямое изменение style элемента.

Slim.tag('dynamic-box', class extends Slim {
  get template() {
    return `<div id="box">Смена цвета</div>`;
  }

  onBeforeCreated() {
    this.colorIndex = 0;
    this.colors = ['red', 'green', 'blue'];
  }

  onCreated() {
    this.updateColor();
  }

  updateColor() {
    const box = this.shadowRoot.getElementById('box');
    box.style.backgroundColor = this.colors[this.colorIndex];
    this.colorIndex = (this.colorIndex + 1) % this.colors.length;
    setTimeout(() => this.updateColor(), 1000);
  }
});

Особенности динамического подхода:

  • Можно применять анимации, переходы и реакции на события.
  • Стили становятся управляемыми через логику компонента.
  • Поддерживается адаптивность и интерактивность, недоступные при статических стилях.

Использование CSS-переменных

Для увеличения гибкости можно внедрять CSS-переменные, которые упрощают переиспользование цветов, шрифтов и размеров.

Slim.tag('variable-box', class extends Slim {
  get template() {
    return `
      <style>
        :host {
          --box-color: teal;
          --box-size: 120px;
        }

        div {
          width: var(--box-size);
          height: var(--box-size);
          background-color: var(--box-color);
        }
      </style>
      <div></div>
    `;
  }
});

Преимущества CSS-переменных:

  • Позволяют легко менять стиль компонента извне.
  • Улучшают читаемость и поддержку кода.
  • Совместимы с динамическим обновлением через JavaScript.

Инкапсуляция стилей через Shadow DOM

Slim.js автоматически использует Shadow DOM, что гарантирует, что стили компонента не выйдут за его границы:

Slim.tag('shadow-card', class extends Slim {
  get useShadow() { return true; }

  get template() {
    return `
      <style>
        .card {
          padding: 20px;
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
          border-radius: 8px;
        }
      </style>
      <div class="card">Контент карточки</div>
    `;
  }
});

Shadow DOM обеспечивает:

  • Полную изоляцию стилей от глобального CSS.
  • Возможность безопасного переопределения переменных и селекторов.
  • Совместимость с любыми веб-компонентами на странице.

Рекомендации по структурированию стилей

  1. Для небольших компонентов достаточно inline-стилей.
  2. Для сложных компонентов использовать <style> внутри шаблона.
  3. Динамические эффекты реализовывать через JavaScript с изменением стиля элементов.
  4. Для глобально переиспользуемых значений применять CSS-переменные.
  5. Использовать Shadow DOM для полной изоляции, особенно если компонент будет вставляться в большие проекты.

Эта стратегия позволяет создавать компоненты с полностью управляемым, локализованным и динамическим стилем без риска конфликтов с другими элементами страницы.

Оглавление