Переменные CSS и веб-компоненты

Переменные CSS или настраиваемые свойства - это значения, определенные разработчиками CSS, которые содержат определенные значения для повторного использования в документе.

Они устанавливаются с использованием обозначения настраиваемых свойств.

--primary-text-color: black;

Доступ к ним осуществляется с помощью функции var().

color: var(--primary-text-color, #333333);

Второй вход для var() - это значение по умолчанию, которое принимается во внимание, если переменная не определена или браузер не поддерживает переменные CSS.

Мы разрабатывали приложение, которое следовало архитектуре микро-интерфейса с использованием веб-компонентов. Существовало основное приложение-оболочка, которое обрабатывало маршрутизацию и извлекало нужное микроприложение во время выполнения. Микроприложения были независимыми и разрабатывались на Angular, Vue и Polymer (библиотека JavaScript с открытым исходным кодом для создания веб-приложений с использованием веб-компонентов).

Кроме того, каждое микроприложение использовало основную библиотеку, состоящую из различных повторно используемых веб-компонентов, таких как Alerts, Spinner, Card, Datatable и т. Д.

Была одна особенность установки темы всего приложения из списка тем. Также пользователь мог создать свою собственную тему. Основная проблема заключалась в том, как изменить стиль веб-компонентов из приложения оболочки или любого микроприложения, поскольку веб-компонент имеет свою собственную теневую DOM. Shadow DOM служит для инкапсуляции. Он позволяет компоненту иметь собственное «теневое» дерево DOM, к которому нельзя получить доступ из основного документа, может иметь правила локального стиля и многое другое.

Для меня переменные CSS стали спасением, поскольку они могут проникать через Shadow DOM и применяться к узлам внутри веб-компонента.

Ниже приведен пример того, как мы это реализовали.

Мы определили различные переменные CSS в нашем приложении оболочки.

:root {
--primary-text-color: #fff;
--primary-background-color: #ededed;
--secondary-text-color: #53565;
--secondary-background-color:   #cccbcb;
}

В веб-компоненте (класс Vue, завернутый в веб-компонент с помощью библиотеки @ vue / web-component-wrapper).

Компонент кнопки с двумя типами свойств и меткой.

//Button.vue
<template>
  <button class="btn" :class="[type]">{{label}}</button>
</template>
<script>
  export default {
    props:{
      label:String,
      type: String,
  }
}
</script>
<style>
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .15rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-  out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin: 0;
  overflow: visible;
}
.primary {
  color: var(--primary-text-color,#f4f4f4);
  background-color: var(--primary-background-color,#49d597);
  border-color:  var(--primary-background-color,#49d597);
}
.secondary {
  color: var(--secondary-text-color,#f1f1f1);
  background-color: var(--secondary-background-color,#32c547);
  border-color:  var(--secondary-background-color,#32c547);
}

Обертывание и регистрация компонента Vue Button как настраиваемого элемента с помощью @ vue / web-component-wrapper.

import Vue from 'vue';
import wrap from ‘@vue/web-component-wrapper’;
import Button from './components/Button.vue';
const button = wrap(Vue, Button);
window.customElements.define('wc-button', button);

Веб-компонент Button можно использовать следующим образом:

//In Vue app
<wc-button type="primary" @click="save()" label="Save"></wc-button>
<wc-button type="secondary" @click="reset()" label="Reset"></wc-button>
//In angular app
<wc-button type="primary" (click)="save()" label="Save"></wc-button>
<wc-button type="secondary" (click)="reset()" label="Reset"></wc-button>
//In plain JS
<wc-button type="primary" onclick="save()" label="Save"></wc-button>
<wc-button type="secondary" onclick="reset()" label="Reset"></wc-button>

Ниже приведен код того, как мы изменили переменные CSS в зависимости от темы, выбранной пользователем. Здесь мы выбираем корневой элемент документа и меняем значение переменной, используя метод стиля setProperty().

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

userSelectedtheme = {
 name : "Navy Blue",
 properties: [
    { key: "--primary-background-color", value: "#d2c5ce" },
    { key: "--primary-text-color", value: "#3e3a3a" },
    { key: "--secondary-background-color", value: "#504d4d" },
    { key: "--secondary-text-color", value: "#4c3b3a" },
]}
userSelectedtheme.properties.forEach(property => {
  document.documentElement.style.setProperty (
    property.key,
    property.value
  );
});

Бум, вот и все, готово… Спасибо за уделенное время… :)

Переменные CSS и веб-компоненты

Вопросы по теме