4

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.

mark
  • 129
  • 1
  • 8

1 Answers1

2

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.

Matt B
  • 6,192
  • 1
  • 20
  • 27
  • Thanks for the answer. So basically you can't style Web Components unless the author of the component explicitly specifies "apply-author-styles=true" or allows styling via custom pseudo elements or CSS Variables. Definitely something for widget creators to bear in mind. – mark May 16 '13 at 13:31
  • 1
    Absolutely. The goal of a component is to provide a complete, reusable markup, just as an element. But we don't always want to allow changes to our formatting (take a Google+ button on the page. You shouldn't be able to change the background colour to facebook blue). But as you said, as development progresses, widget creators need to keep in mind that maybe we don't all want black-on-white elements. =) A nice solution is for the author to allow styles and then apply classes to various parts of the component but do not specify that class themselves. That allows users to define the class nicely. – Matt B May 16 '13 at 17:23