O'Reilly logo

Developing Web Components by Jason Strimpel, Jarrod Overson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 9. Completing the Dialog Widget

This chapter focuses on completing the dialog widget that will be used throughout the rest of the book.

Styling the Widget

I am not a UI/UX expert, nor am I a designer. The selected styles were based on the default styling for jQuery UI. The drag handle image is a portion of a jQuery UI sprite as well.

The intent of this styling is not to advise on styling in the sense of aesthetics or usability, but rather to describe how to apply any styles to a widget.

Adding CSS

The dialog CSS is very minimal. It could easily be stored internally in the dialog widget JavaScript and then applied directly to the elements in question upon instantiation of a dialog widget. However, this approach would not scale well or lend itself to ease of maintenance.

For instance, if you wanted to add a positioned background image it would require setting each property individually as opposed to being able to simply apply all styling in the value of the background property of a selector in a stylesheet. Additionally, applying the CSS via JavaScript is not nearly as efficient as allowing the browser to apply the styles defined in a stylesheet. Lastly, it makes overriding the CSS properties more difficult—because the CSS is applied inline if done via JavaScript, a higher level of specificity is required than when overriding CSS set in a stylesheet.

With those caveats in mind, here’s the CSS for our simple dialog widget:

[role="dialog"] {
    display: none ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required