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

Question

Я играю с компонентом поповер в «пчела» Dart веб-компонентов пакета (bee)

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

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

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

Спасибо.

Answer 1

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

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

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