Как стилизовать внутренние элементы веб-компонента Dart?

Я играю с компонентом popover в пакете веб-компонентов Dart "bee" (bee)

Однако я не вижу способа изменить стиль по умолчанию для внутренних элементов компонента. Я хочу изменить стиль <div class="x-popover-dialog">, чтобы он имел закругленные углы. Однако, если я добавлю следующее в файл css моего приложения, он просто будет удален к тому времени, когда он попадет в папку «out».

.x-popover-dialog {
    border-radius: 6px;
}

Возможно ли это или это единственный способ изменить сам веб-компонент (или, возможно, расширить его)?

Спасибо.


dart dart-webui
person mark    schedule 14.05.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, здесь есть ряд факторов. Во-первых, вы не можете переопределить класс, определенный внутри компонента. В настоящее время вы можете применить свой собственный стиль к компоненту, если этот элемент не определяет свои собственные стили. Например, вы можете изменить размер шрифта для элементов «p» внутри компонента. Или скажите div#someid { color: red; }, но вы не можете переопределить класс или добавить определения к классу.

Сам факт того, что вы вообще можете изменять стили, если это явно не разрешено, является ошибкой в ​​файле web_ui. В настоящее время отслеживается как: проблема 374: поддержка стилей apply-author.

В идеале, когда реализована полная поддержка, вы не сможете применять свои собственные стили к веб-компоненту, если это явно не разрешено самим веб-компонентом. Для получения дополнительной информации о apply-author-styles и соответствующие reset-style-inheritance см. отличный Shadow DOM 201 учебник.

person Matt B    schedule 15.05.2013
comment
Спасибо за ответ. Таким образом, в основном вы не можете стилизовать веб-компоненты, если только автор компонента явно не укажет apply-author-styles=true или не разрешит стилизацию с помощью пользовательских псевдоэлементов или переменных CSS. Определенно кое-что для создателей виджетов, чтобы иметь в виду. - person mark; 16.05.2013
comment
Абсолютно. Цель компонента — предоставить полную, повторно используемую разметку, как элемент. Но мы не всегда хотим разрешать изменения в нашем форматировании (возьмите кнопку Google+ на странице. Вы не сможете изменить цвет фона на синий facebook). Но, как вы сказали, по ходу разработки создатели виджетов должны помнить, что, возможно, не всем нужны элементы черного на белом. =) Хорошее решение для автора - разрешить стили, а затем применить классы к различным частям компонента, но не указывать этот класс самостоятельно. Это позволяет пользователям красиво определять класс. - person Matt B; 16.05.2013