Bug 1580983 is looking for an easy first element to migrate. This bug is looking for a hard one in order to surface problems we'll see. Some of the complications:

• There's a ton of them, and they probably use all the xul layout properties (flex, pack, orient, etc). We may want to expose the 'emulated' css properties (https://searchfox.org/mozilla-central/rev/8a63fc190b39ed6951abb4aef4a56487a43962bc/toolkit/content/xul.css#581-627) to them, or implement attribute handling in the Custom Element then set inline styles as necessary.
• With the current rules, richlistitem will need a dash in the name, but then we can't extend it anymore (https://searchfox.org/mozilla-central/search?q=extends%3A+%22richlistitem%22&case=true&path=) due to the specified behavior and https://searchfox.org/mozilla-central/rev/8a63fc190b39ed6951abb4aef4a56487a43962bc/dom/base/CustomElementRegistry.cpp#730-740. We may want to relax these rules.
• There's some platform code looking for this by tag name + isxulelement: https://searchfox.org/mozilla-central/rev/8a63fc190b39ed6951abb4aef4a56487a43962bc/widget/windows/nsNativeThemeWin.cpp#819-820. Maybe that could be just removed (do we use a richlistitem inside a menu?) or adapted to add a permission check so that doesn't run for non chrome (or can this code even run for non-chrome?).

One idea I had for supporting the [flex], [orient], etc attributes (instead of somehow exposing our emulated flex CSS properties at https://searchfox.org/mozilla-central/rev/8a63fc190b39ed6951abb4aef4a56487a43962bc/toolkit/content/xul.css#581-627) is to implement something like this on MozHTMLElement:

setFlexProperties() {
  if (this.hasAttribute("flex")) {
    this.style.MozBoxFlex = this.getAttribute("flex");
  }
  if (this.hasAttribute("ordinal")) {
    this.style.MozBoxOrdinalGroup = this.getAttribute("ordinal")
  }
  // Maybe also do orient, pack, etc, or maybe just expose the current "behind flexbox emulation pref" xul.css
  // rules that have a concrete set of values to all chrome HTML elements.
}
connectedCallback() {
  this.setFlexProperties();
}

setAttribute(name, val) {
  super.setAttribute(name, val);
  this.setFlexProperties();
}

removeAttribute(name) {
  super.removeAttribute(name);
  this.setFlexProperties();
}

If this worked (functionally and perf-wise), it could make parts of Bug 1493962 obsolete by expanding this feature to xul elements when emulated flex mode is enabled.