Expanding list web component

• UK
  • Yorkshire
    • Leeds
      • Train station
      • Town hall
      • Headrow
    • Bradford
    • Hull
• USA
  • California
    • Los Angeles
    • San Francisco
    • Berkeley
  • Nevada
  • Oregon

• Not
• an
• expanding
• list

https://gothub.lunar.icu/raw/mdn/web-components-examples/master/expanding-list-web-component/main.js
class ExpandingList extends HTMLUListElement {

  constructor() {    self = super();  }

  connectedCallback() {
    var uls = Array.from(self.querySelectorAll('ul'));
    var lis = Array.from(self.querySelectorAll('li'));
    uls.forEach((ul) => {
      ul.style.display = 'none';
    });
    lis.forEach((li) => {
      if (li.querySelectorAll('ul').length > 0) {
        li.setAttribute('class', 'closed');
        var childText = li.childNodes[0];
        var newSpan = document.createElement('span');
        newSpan.textContent = childText.textContent;
        newSpan.style.cursor = 'pointer';
        newSpan.addEventListener('click', (e) => {
          var nextul = e.target.nextElementSibling;
          if (nextul.style.display == 'block') {
            nextul.style.display = 'none';
            nextul.parentNode.setAttribute('class', 'closed');
          } else {
            nextul.style.display = 'block';
            nextul.parentNode.setAttribute('class', 'open');
          }
        });
        childText.parentNode.insertBefore(newSpan, childText);
        childText.parentNode.removeChild(childText);
      }
    });
  }
}
customElements.define('expanding-list', ExpandingList, { extends: 'ul' });
https://gothub.lunar.icu/raw/mdn/web-components-examples/master/expanding-list-web-component/main.js

"STPH-P": "{#Up}{^}",
"STPH-B": "{#Down}{^}",
"STPH-R": "{#Left}{^}",
"STPH-G": "{#Right}{^}",
"SR-RS": "{#Control_L(End)}{^}",
"STPH-RB": "{#Control_L(Left)}{^}",
"STPH-BG": "{#Control_L(Right)}{^}",
"TKUPT": "{PLOVER:ADD_TRANSLATION}",

"STPH-P": "{#Up}{^}",
"STPH-B": "{#Down}{^}",
"STPH-R": "{#Left}{^}",
"STPH-G": "{#Right}{^}",
"SR-RS": "{#Control_L(End)}{^}",
"STPH-RB": "{#Control_L(Left)}{^}",
"STPH-BG": "{#Control_L(Right)}{^}",
"TKUPT": "{PLOVER:ADD_TRANSLATION}",