Веб-компоненты и общие стили
Это один из тех вопросов, «что нам с этим делать». Как вы знаете, веб-компоненты должны быть небольшими автономными приложениями для веб-сайтов. Однако иногда их нужно стилизовать в зависимости от того, на каком сайте они встроены.
Пример: компонент «Подпишитесь на нашу рассылку». Этот компонент будет иметь несколько ключевых элементов:
- Поле ввода
- Кнопка
- Может рекапча
- Метод, который разговаривает с вашей службой после нажатия кнопки (передача в электронном письме)
Мы собираемся использовать Google и YouTube в качестве примеров. Цветовая схема Google - синяя (давайте представим это), а цветовая схема YouTube - красная. Тогда компонент будет чем-то вроде <newsletter-signup></newsletter-signup> на странице, в которую вы его встраиваете. Это есть и у Google, и у YouTube.
Проблема возникает, когда компоненту необходимо наследовать стили от Google и YouTube. Несколько устаревших селекторов CSS отлично подходит для этого, потому что таблицы стилей Google и YouTube могут просто включать цвета для Shadow DOM, поэтому нам не придется копировать / вставлять стили. Компонент теоретически не должен ничего знать о стилях от хоста, потому что мы хотим, чтобы он наследовал от хоста (Google и YouTube).
На данный момент я создаю веб-компонент с использованием Angular 6, в котором много стилей, потому что в нем много элементов. Я копирую / вставляю стили, Bootstrap, значки и т. д. С хост-сайта, а затем стилизую их на основе <newsletter-signup brand = "google"></newsletter-signup>. Так, если бренд - Google, цвета должны быть, например, красным.
Это действительно плохо по нескольким причинам:
- Стили должны быть обновлены как в веб-компоненте, так и на хосте.
- Дублирование кода - плохая идея
- Если все стили копируются 1: 1, количество байтов, необходимых для стилей, удваивается.
Как бы мне, как разработчику, это учесть? Как мне создать стили на хосте, а затем применить их к моему веб-компоненту (назовем это наследованием)? Я уверен, что у кого-то была такая же проблема с Shadow DOM, как и у меня. Спасибо за прочтение.
Ответы 2
Я понимаю, что вы не хотите писать такие же правила для вашего общего компонента (селектора)
то есть вы хотите стилизовать то место, где находится ваш общий селектор.
Что вы можете сделать, чтобы справиться с этим:
1. Создайте свой собственный логический фреймворк css
Напишите наиболее часто используемые правила CSS в глобальном CSS. Например, если вы интегрировали загрузочную программу и хотите переопределить начальную загрузку, вы напишете наиболее распространенные переопределения в app.css, которые переопределяют начальную загрузку.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/app.scss"
],
Этот app.scss должен быть написан таким образом, чтобы вы могли его переопределить.
- Отправить правила в качестве ввода
отправить пользовательские правила Obj и использовать в элементах, которые нужно переопределить.
<newsletter [input] = "customRulesObj"></newsletter>
component.ts
customRulesObj = new CustomRulesClass();
customRulesObj.color = 'red';
Вы можете отправлять правила на входе в различные компоненты, создав общий класс как вы знаете, где вы встраиваете этот компонент.
- Расширить этот компонент из общего компонента
Если вас слишком беспокоит css, вы можете расширить свой компонент из общего компонента, который предоставляет вам логику css в соответствии с потребностями.
export class NewsLetterComponent extends CSSComponent implements OnInit
{
}
css-component.ts
В этом компоненте можно логически определить css для каждого хоста, текущей ссылки на маршрутизатор и другое множественное условие if else. Вы можете определить правила, переключив условия случая и связав эти правила с компонентом, который вы расширили.
Один из самых обязательных веб-компонентов: Мой хост (страница, на которой я встраиваю свой веб-компонент) не должен зависеть от веб-компонента и не знать о веб-компоненте..
В основном это означает: стили моего веб-компонента не должны передаваться хосту.
Если мой хост решит обновить стили, это должно повлиять на мой веб-компонент. А не наоборот. Чтобы решить эту проблему, я импортировал внешние стили с моего хоста прямо внутри файла CSS, используя @import. Вот пример:
import url("https://my-host.com/styles/core.css");
my-component {
//all styles goes here
}
Я сделал это с помощью SASS, но это можно сделать и с помощью обычного CSS.
Это совсем не лучшее решение, но оно делает то, что я хочу: наследовать стили от хоста. Хотя мне пришлось бы импортировать все существующие таблицы стилей, они все равно работают.
Обратной стороной моего решения является то, что когда я загружаю страницу, она отправляет запрос к стилю из элемента <link> внутри тега <head> моего хоста, а также к стилю внутри моего import. Итак, стили загружаются дважды. Для нашего приложения, предназначенного только для внутреннего использования, не имеет значения, запрашиваем ли мы дополнительные ~ 200 КБ данных.
файл css должен быть кэширован, а затем загружен только один раз. Обратите внимание, что теперь есть новая функция, называемая «настраиваемая таблица стилей для ваших нужд: stackoverflow.com/q/42645363/4600982».
Одна из проблем заключается в том, что мой хост (страница, на которой я включаю свой веб-компонент) должен разделять стили. Насколько я знаю, вы не можете включить внешний ресурс в массив "стилей". Я не мог заставить его работать. Я дам ответ на то, что я сделал для решения некоторых из этих проблем.