How to create internal elements of a Dart web component?

Question

I play with the popover component in the Dart "bee" web component package

However, I do not see a way to change the default style for the internal elements of the component. I want to change the style of <div class="x-popover-dialog"> so that it has rounded corners. However, if I add the following to the css application file, it is simply deleted by the time it gets into the "out" folder.

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

Is this possible, or is it the only way to actually modify the web component itself (or perhaps extend it)?

Thanks.

Answer 1

Well, there are a number of factors. First, you cannot override a class defined inside a component. Currently, you can apply your own style to a component if this element does not define its own styles. For example, you can change the font size to 'p' elements inside a component. Or say div#someid { color: red; } div#someid { color: red; } , but you cannot override the class or add definitions to the class.

The fact that you can change styles at all, if this is not explicitly allowed, is a bug in web_ui. Currently tracked as: Issue 374 : Support for styles-authors-styles.

Ideally, when full support is implemented, you cannot apply your own styles to the web component unless explicitly permitted by the web component itself. For more information on apply-author-styles and related reset-style-inheritance, see the Shadow DOM 201 tutorial.