AngularDart-как стилизовать компонент с глобальным CSS в Google Chrome 35m (applyAuthorStyles не рекомендуется)

Я разрабатываю большой проект, используя Angular Dart. Javascript будет сгенерирован из Dart с помощью dart2js. На данный момент проект ориентирован на Google Chrome, но в будущем он должен работать и в Firefox.

Все было хорошо, пока на прошлой неделе не вышел Google Chrome 35m. Все Component сломали таблицу стилей. Похоже, что applyAuthorStyles не работает в Google Chrome 35m. Я потратил много времени на исследования и в конце концов пришел к следующему решению:
Воспользуйся useShadowDom: false при объявлении Component. Это заставляет меня рефакторинг каждый существовал Componentв моем проекте:
  • удалить cssUrl. Я должен переместить таблицу стилей каждого Component в один (или несколько) файл таблицы стилей и импортировать их в index.html
  • повторно реализовать каждый ShadowRootAware.onShadowRoot, так как метод не принимает ShadowRoot в качестве аргумента
  • повторный тест (Конечно)
Как вы можете видеть, если я применю это решение, будет очень много дополнительной работы.

Интересно, есть ли лучшие решения, чем моя?

EDIT

Я думаю, что должен объяснить свою структуру кода, чтобы помочь всем лучше понять мою проблему.

  • у меня много Component в моем проекте. Каждый Component содержит 3 файла: 1 CSS-файл (область действия), 1 HTML-файл и 1 dart-файл
  • у меня есть несколько глобальных CSS-файлов и импортировать их при входе HTML-страницы (индекс.html)
  • в Chrome 35m, HTML в Component не имеет стиля от global CSS даже я установил applyAuthorStyles: true (applyAuthorStyles является устаревшим)

Я просто нужно решение для стиля Component с глобальным CSS (из фреймворка CSS, например), с минимальными изменениями кода.

2 3
css google-chrome dart shadow-dom angular-dart

2 ответа:

Я так не думаю.

Если вы не используете shadow DOM, вы не можете иметь область CSS.

Один из вариантов-сохранить shadow DOM и изменить CSS, который вы применили к своей странице, чтобы он работал с shadowDOM (например, добавить /deep/ combinator).

Примечание: applyAuthorStyles был объявлен устаревшим уже в течение нескольких месяцев.

С некоторых пор угловой.dart поддерживает создание компонентов без shadow DOM путем добавления аргумента useShadowDom: false к аргументу @Component.

1

Я бы не сказал, что есть хороший способ стилизовать все в угловой.проект dart с глобальным css-файлом, но я нашел обходной путь, который работает для меня.

Мой индексный файл-это тонкая оболочка для моего основного компонента. Затем я создал папку типа: lib/component/css/sass. В sass я создал SCSS-партиалы всех моих css-файлов (просто переименуйте его из чего-то вроде myCss.css в _myCss.scss) и создал главный scss-файл lg-global.scss, который импортирует все эти партиалы: 

@import "pure-side-menu";
@import "pure-min";
@import "grids-responsive-min";

{... my css rules}

Я настроил compass для компиляции моего scss-файлы в один css-файл в папке css, и теперь я могу импортировать этот единственный файл в мои компоненты следующим образом: 

@Component(
    selector: 'main-menu',
    templateUrl: 'main_menu.html',
    cssUrl: 'css/lg-global.css')

Если я действительно хочу иметь специализированный css-файл для компонента, это тоже легко. Просто создайте новый scss-файл и импортируйте любые SCSS-партиалы, которые вы хотите.

Это большая дополнительная работа, но scss все равно намного лучше. Моя единственная реальная проблема заключается в том, будет ли это плохая производительность, чтобы использовать массивный файл css в каждом компоненте.
1