message: Remove `TemplateElementBase` from the `Splitter` widget
diff: /*
  - * Copyright 2017 Simon Edwards <simon@simonzone.com>
  + * Copyright 2017-2020 Simon Edwards <simon@simonzone.com>
  *
  * This source code is licensed under the MIT license which is detailed in the LICENSE.txt file.
  */
  @@ -7,11 +7,12 @@ import { WebComponent } from 'extraterm-web-component-decorators';
  import { ResizeNotifier } from 'extraterm-resize-notifier';
  import {Logger, getLogger} from "extraterm-logging";
  import { log } from "extraterm-logging";
  +import { trimBetweenTags } from 'extraterm-trim-between-tags';
  import * as ThemeTypes from '../../theme/Theme';
  import * as DomUtils from '../DomUtils';
  -import { TemplatedElementBase } from './TemplatedElementBase';
  import { RefreshLevel } from '../viewers/ViewerElementTypes';
  +import { ThemeableElementBase } from '../ThemeableElementBase';
  const ID_TOP = "ID_TOP";
  const ID_CONTAINER = "ID_CONTAINER";
  @@ -39,7 +40,7 @@ export enum SplitOrientation {
  *
  */
  @WebComponent({tag: "et-splitter"})
  -export class Splitter extends TemplatedElementBase {
  +export class Splitter extends ThemeableElementBase {
  static TAG_NAME = "ET-SPLITTER";
  private static _resizeNotifier = new ResizeNotifier();
  @@ -52,9 +53,17 @@ export class Splitter extends TemplatedElementBase {
  private _dividerDragOffset: number = 0;
  constructor() {
  - super({ delegatesFocus: false });
  -
  + super();
  this._log = getLogger(Splitter.TAG_NAME, this);
  +
  + this.attachShadow({ mode: 'open', delegatesFocus: false });
  +
  + const styleElement = document.createElement("style");
  + styleElement.id = ThemeableElementBase.ID_THEME;
  + this.shadowRoot.appendChild(styleElement);
  + this.shadowRoot.appendChild(DomUtils.htmlToFragment(trimBetweenTags(this._html())));
  + this.updateThemeCss();
  +
  this._paneSizes = new PaneSizes();
  const topDiv = this._elementById(ID_TOP);
  @@ -172,18 +181,6 @@ export class Splitter extends TemplatedElementBase {
  </div>`;
  }
  - //-----------------------------------------------------------------------
  - //
  - // #######
  - // # # # ###### # # ##### ####
  - // # # # # ## # # #
  - // ##### # # ##### # # # # ####
  - // # # # # # # # # #
  - // # # # # # ## # # #
  - // ####### ## ###### # # # ####
  - //
  - //-----------------------------------------------------------------------
  -
  private _handleMouseDown(ev: MouseEvent): void {
  const target = <HTMLElement> ev.target;
  @@ -392,6 +389,9 @@ export class Splitter extends TemplatedElementBase {
  }
  }
  + private _elementById(id: string): HTMLElement {
  + return DomUtils.getShadowId(this, id);
  + }
  }
  //-----------------------------------------------------------------------
  