Currently we are duplicating code across most of our dialogs, and share styling by carefully selecting CSS class/id names that exist in settings_dialog_css.html (for  example #dialog-content, .body .explanation, .title).

As part of implementing the "Certificate manager" section, I need to add four more dialogs, so I think it might be worth creating a new <settings-dialog> element, and re-use it from existing dialogs (and from the dialogs I am about to add). I am expecting the final result to look as follows

<my-new-dialog>
  <settings-dialog>
    <div class='title'>Title goes here</div>
    <div class='body'>Dialog body goes here</div>
    <div class='button-container'>buttons go here</div>
  <settings-dialog>
</my-new-dialog>

The new <settings-dialog> element would take care of styling/positioning title, body and button-container appropriately without duplicating code (which is our current approach), by using the <content> tag with a filter, for example 
<content select=".class-name-here"></content>