Developing Web Components

Chapter 9. Completing the Dialog Widget

Jason Strimpel

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 ...