опросы похожи на некоторые другие вопросы в StackOverflow, но я не смог найти никакого ответа с описанием, применимым к моей ситуации и не осуждаемому методу (и я начинаю думать, что, возможно, не существует какого-либо хорошего решения для этой ситуации).

Допустим, у нас есть некоторый файл main.css, который содержит общие стили для кнопок, списков, ссылок и так далее. Так что это просто какой-то стандартный файл .css, который содержит общие стили, которые мы хотим использовать в приложении. И мы хотим применить те же стили к веб-компонентам с Shadow DOM.

Есть несколько способов, о которых я знаю, для достижения этой цели:

Использование одного из устаревших подходов: :: shadow, >>>, / deep / selectors. Но эти селекторы уже устарели, так что я думаю, что это не очень хороший способ двигаться дальше.Использование переменных CSS. Этот подход хорош для настройки, если нам нужно установить несколько свойств. Но это слишком сложно, если мы хотим перенести 10-20 общих стилей из файла main.css.Использование оператора @import или тегов "link" внутри Shadow DOM. Это будет работать, но дублирует все стили для каждого компонента. Если у нас будет 10 веб-компонентов, мы получим 10 дубликатов одинаковых стилей. Это не похоже на достаточно хорошее решение тоже. Особенно, если у нас много общих стилей, кажется, что это может быть плохим решением с точки зрения производительности.Не используйте Shadow DOM и не используйте глобальные стили :) Но это не решение текущей проблемы.

Я также проверил, как эта проблема решена в Angular Framework (я проверил версию 5 Angular). Когда я устанавливаю поведение инкапсуляции в Native, оно просто дублирует стили (как в # 3, описанном выше), что, я думаю, не лучший способ (но, возможно, лучший из существующих в настоящее время).

Итак, кто-нибудь знает, есть ли другой способ решить эту проблему без описанных выше недостатков? Это звучит так, будто текущие недостатки Shadow DOM приносят еще больше проблем, чем пытаются решить.