Web Component Panel (takes in a route and the current activeRoute)

panels.js

import { html } from 'diffhtml';
import { WebComponent, PropTypes } from 'diffhtml-components';

export default class DevtoolsPanels extends WebComponent {
  static propTypes = {
    route: PropTypes.string,
    activeRoute: PropTypes.string,
  }

  render() {
    return html`
      <style>${this.styles()}</style>

      <div class="panel">
        <slot></slot>
      </div>
    `;
  }

  styles() {
    const { route, activeRoute } = this.props;
    const isActive = route === activeRoute;

    return `
      :host {
        display: ${isActive ? 'flex' : 'none'};
        flex: auto;
        position: relative;
        background-color: #FFFFFF;
        overflow-y: auto;
      }

      .panel {
        box-sizing: border-box;
        display: flex;
        flex: 1;
        flex-direction: column;
      }
    `;
  }
}

customElements.define('devtools-panels', DevtoolsPanels);