How to style internal elements of a Dart Web Component?

4
votes

I am playing with the popover component in the Dart "bee" Web Components package (bee)

However, I can't see a way of changing the default styling for internal elements of the component. I want to change the style of the <div class="x-popover-dialog"> so that it has rounded corners. However, if I add the following to my app's css file, it just gets removed by the time it gets to the "out" folder.

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

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

Thanks.

1
dartdart-webui

1 Answers

2
votes

Okay, there are a number of factors here. First, is you cannot redefine a class defined within a component. You can currently apply your own styling to a component if that element does not specify its own styles. For instance, you can change the font-size on on 'p' elements within a component. Or say div#someid { color: red; } but you cannot redefine a class, or add definitions to a class.

The very fact that you can modify the styles at all, unless explicitly allowed, is a bug in the web_ui. Currently tracked as: Issue 374: Support apply-author-styles.

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