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 в качестве аргумента.
  • Перепроверить (конечно)

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

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

ИЗМЕНИТЬ

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

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

Мне просто нужно решение для стилизации Component с помощью глобального CSS (например, из CSS Framework) с минимальными изменениями кода.


dart google-chrome css shadow-dom angular-dart
person long.luc    schedule 27.05.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

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

person Günter Zöchbauer    schedule 27.05.2014
comment
Спасибо за быстрый ответ. Я знаю, что applyAuthorStyles устарел, но не могли бы вы показать мне какие-либо способы заменить applyAuthorStyle актуальным решением? - person long.luc; 27.05.2014
comment
Я не знаю, что тебе показать. Вы должны сначала решить, каким путем вы хотите идти. Вы можете придерживаться решения, которое вы предложили в своем вопросе, или сохранить shadowDOM и изменить CSS, который не работает с shadowDOM. Какая информация вам нужна? - person Günter Zöchbauer; 27.05.2014
comment
Мне просто нужно решение, которое заставляет Component наследовать весь глобальный CSS с минимальными изменениями кода. - person long.luc; 27.05.2014
comment
Извините, тогда я смогу помочь только тогда, когда проанализирую весь ваш код. Зачем вообще понадобился applyAuthorStyles? - person Günter Zöchbauer; 27.05.2014
comment
У меня есть несколько глобальных файлов CSS для определения общего стиля для всего сайта. В предыдущих версиях Angular я использовал applyAuthorStyles, чтобы узлы HTML в Component.shadowRoot наследовали все глобальные CSS. - person long.luc; 27.05.2014
comment
Если вы создали и поддерживаете CSS самостоятельно, это легко. Это сложнее, когда вы используете библиотеки CSS, такие как Bootstrap. Можете ли вы добавить в свой вопрос некоторые элементы CSS, которые вызывают у вас проблемы с shadowDOM, чтобы мы могли обсудить его, или лучше создать новый вопрос, потому что тема отходит от исходного вопроса. - person Günter Zöchbauer; 27.05.2014
comment
Я подумаю, как лучше описать мою проблему. Спасибо за уделенное время! - person long.luc; 27.05.2014
comment
Вы можете взглянуть на это: polymer-project.org/docs/polymer/ style.html - person Günter Zöchbauer; 27.05.2014

arrow_upward
1
arrow_downward

Я бы не сказал, что есть хороший способ стилизовать все в проекте Angular.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}

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

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

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

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

person CorayThan    schedule 24.11.2014
comment
Браузер берет файл CSS из кеша после первой загрузки, поэтому не снижает производительность. - person Günter Zöchbauer; 24.11.2014