// Less-wordy helper to create elements.
const make = (el) => document.createElement(el);

class Foo extends HTMLElement {
  constructor() {
    super();
  }

  css = `
  :host { 
    display: block;
    border-radius: 0.5em;
    border: 0.2em solid #7a8872;
    background-color: #c1bcac;
    color: #214e34;
    padding: 1em;
    font-family: Helvetica, sans-serif;
   }
   div {
      height: 1em; 
      padding: 1em 0;
   }
  `;

  connectedCallback() {
    const root = this.attachShadow({
      mode: "open"
    });
    const style = make("style");
    style.textContent = this.css;
    root.append(style);

    const msg = make("div");
    root.append(msg);

    const bar = make("a-bar");
    root.append(bar);
    bar.addEventListener("click", (event) => {
      if (event.target instanceof Bar) {
        msg.textContent = "Bar clicked";
      }
    });
  }
}
customElements.define("a-foo", Foo);

class Bar extends HTMLElement {
  constructor() {
    super();
  }

  css = `
  :host { 
    display: block;
    border-radius: 0.5em;
    border: 0.2em solid #5c7457;
    background-color: #979b8d;
    color: #214e34;
    padding: 1em;
    font-family: Helvetica, sans-serif;
   }
   div {
      height: 1em;
   }
  `;

  connectedCallback() {
    const root = this.attachShadow({
      mode: "open"
    });
    const style = make("style");
    style.textContent = this.css;
    root.append(style);

    root.append("Click me");
  }
}
customElements.define("a-bar", Bar);