I think it might make sense to expand <cr-expand-button> to a new <cr-expansion-panel> that takes in 2 slots, 1 for the header/summary and 1 for the expandable content. It should handle all the toggling internally and house the <iron-collapse> HTML so that it doesn't have to be duplicated every time it's used.

Something like:

<cr-expansion-panel>
  <div slot="header">Click me...</div>
  <div slot="content">...to see me</div>
</cr-expansion-panel>

@johntlee: Would the proposed new element be used in multiple WebUI pages? This is a requirement for adding new shared UI elements. Otherwise the element is added only where it is used, and only promoted to the shared location when a 2nd client is found.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/90657fcb3170ee4cb3763fc748c63258f6a8869a

commit 90657fcb3170ee4cb3763fc748c63258f6a8869a
Author: John Lee <johntlee@chromium.org>
Date: Thu Jan 10 03:46:00 2019

WebUI: Correct the uses of cr-expand buttons and add padding to them

This updates cr-expand-button to be entirely clickable and be easily
customized with classes on the component itself, so that
we can actually use the <slots>s more easily, use buttons as entire
'settings-box' rows and remove some duplicated code

Bug:  880120 , 686905
Change-Id: I29fdc238b16ab00ee7666199a71939975604b399
Reviewed-on: https://chromium-review.googlesource.com/c/1396598
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#621447}
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/a11y_page/tts_subpage.html
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/internet_page/internet_detail_page.html
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/internet_page/internet_detail_page.js
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/internet_page/internet_page.html
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/internet_page/internet_page.js
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/chrome/browser/resources/settings/languages_page/languages_page.html
[modify] https://crrev.com/90657fcb3170ee4cb3763fc748c63258f6a8869a/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

Ended up just cleaning of cr-expand-button and nixing the expansion-panel idea.

The only uses of cr-expand-button that don't use the slots are when we want to conditionally show the expand-button or not. I didn't fix these since I didn't think it made sense to have an expand-button custom element that had a property that made it not look like and not act like an expand-button.