diff --git a/media/webview-logging.css b/media/webview-logging.css
index 6dd643f..d32bca2 100644
--- a/media/webview-logging.css
+++ b/media/webview-logging.css
@@ -12,7 +12,7 @@
   flex-direction: column;
 }
 
-#logs-table-header>div {
+log-header>div {
   background-color: var(--vscode-editor-background);
   border-bottom: 2px solid var(--vscode-panel-border);
   padding-bottom: 5px;
@@ -20,7 +20,7 @@
   top: 0;
 }
 
-#logs-table-header,
+log-header,
 log-view-row {
   display: table-row-group;
 }
@@ -34,7 +34,7 @@
 }
 
 .log-list-cell,
-#logs-table-header>div {
+log-header>div {
   overflow: clip;
   text-align: left;
   text-overflow: ellipsis;
diff --git a/webviews/logging/components/log_header.ts b/webviews/logging/components/log_header.ts
index df7e9ff..9e66fc3 100644
--- a/webviews/logging/components/log_header.ts
+++ b/webviews/logging/components/log_header.ts
@@ -4,57 +4,69 @@
 
 import * as constant from '../src/constants';
 import { State } from '../src/state';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 import { LogField } from '../src/fields';
 
-export class LogHeader {
-  private tableHeader: Element;
+@customElement('log-header')
+export class LogHeader extends LitElement {
   private maxWidths = {} as Record<string, number>;
+  private headerKeys: LogField[];
 
   constructor(private state: State) {
+    super();
     const fields = this.state.currentFields;
-    const keys = Object.keys(fields);
-    this.tableHeader = this.initTableHeader();
+    const keys = Object.keys(fields).map(field => field as LogField);
+    this.headerKeys = keys;
     for (let i = 0; i < keys.length; i++) {
       const header = keys[i] as LogField;
-      const headerCell = document.createElement('div');
       this.maxWidths[header] = 0;
-      headerCell.id = header;
-      headerCell.style.width = fields[header].width;
-      headerCell.innerText = fields[header].displayName;
-      headerCell.ariaLabel = fields[header].displayName;
-      headerCell.ariaColIndex = `${i + 1}`;
-      this.tableHeader.appendChild(headerCell);
-      if (i === keys.length - 1) {
-        break;
-      }
-      const headerDiv = document.createElement('div');
-      headerDiv.classList.add('column-resize');
-      headerCell.appendChild(headerDiv);
-      createResizableColumn(this.state, this.maxWidths, headerCell, headerDiv);
     }
   }
 
-  /**
-   * Returns the core element.
-   */
-  get element() {
-    return this.tableHeader;
+  render() {
+    const fields = this.state.currentFields;
+    return html`
+
+    ${this.headerKeys.map((field, i) => {
+    return html`
+      <div
+        id="${field}"
+        aria-label="${fields[field].displayName}"
+        aria-colindex="${i + 1}"
+        style="width: ${fields[field].width}">
+        ${fields[field].displayName}
+        ${(i !== this.headerKeys.length - 1) ? (html`
+          <div
+            class="column-resize"
+          ></div>
+        `) : ''}
+      </div>
+      `;
+  })}
+    `;
   }
 
-  /**
-   * Initializes the header element.
-   *
-   * @return the header element.
-   */
-  private initTableHeader(): HTMLDivElement {
-    const tableHeader = document.createElement('div');
-    tableHeader.id = 'logs-table-header';
-    return tableHeader;
+  protected createRenderRoot() {
+    return this;
   }
 
   public setMaxCellWidth(id: LogField, maxWidth: number): void {
     this.maxWidths[id] = maxWidth;
   };
+
+  firstUpdated(changedProperties: any) {
+    super.firstUpdated(changedProperties);
+    const resizers = this.querySelectorAll('.column-resize');
+    for (const index in Array.from(resizers)) {
+      const curResizer = resizers[index];
+      createResizableColumn(
+        this.state,
+        this.maxWidths,
+        curResizer.parentElement!,
+        curResizer as HTMLElement);
+    }
+  }
 }
 
 /**
diff --git a/webviews/logging/components/log_list.ts b/webviews/logging/components/log_list.ts
index d1712ed..cd2cb89 100644
--- a/webviews/logging/components/log_list.ts
+++ b/webviews/logging/components/log_list.ts
@@ -74,7 +74,7 @@
    */
   public reset() {
     this.logList.innerHTML = '';
-    this.logList.appendChild(this.logHeader.element);
+    this.logList.appendChild(this.logHeader);
     this.hasPreviousLog = false;
     this.filterResultsCount = 0;
   }
@@ -99,7 +99,7 @@
    */
   private initLogList(): HTMLDivElement {
     let logList = document.createElement('div');
-    logList.appendChild(this.logHeader.element);
+    logList.appendChild(this.logHeader);
     logList.id = 'log-list';
     return logList;
   }
@@ -121,7 +121,11 @@
       element.setAttribute('hidden', '');
     }
     this.logList.appendChild(element);
-    this.setMaxCellWidth(element);
+    element.updateComplete
+      .then(() => {
+        this.setMaxCellWidth(element.children[0]);
+      })
+      .catch(e => { });
   }
 
   private setMaxCellWidth(row: Element) {
diff --git a/webviews/logging/test/log_header.test.ts b/webviews/logging/test/log_header.test.ts
index 80cfe6b..aaf390d 100644
--- a/webviews/logging/test/log_header.test.ts
+++ b/webviews/logging/test/log_header.test.ts
@@ -6,23 +6,27 @@
 import * as constant from '../src/constants';
 import { State } from '../src/state';
 import { LogHeader } from '../components/log_header';
-import { FakeWebviewAPi } from './util';
+import {FakeWebviewAPi} from './util';
+import {LogList} from '../components/log_list';
 
 before(() => {
   chai.should();
 });
 
-// TODO(fxbug.dev/110279): re-enable
-describe.skip('LogHeader', () => {
+describe('LogHeader', () => {
   let state: State;
   let logHeader: LogHeader;
+  let logList: LogList;
   let root: HTMLElement;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     root = document.createElement('div');
+    document.body.appendChild(root);
     state = new State(new FakeWebviewAPi());
-    logHeader = new LogHeader(state);
-    document.body.appendChild(logHeader.element);
+    logList = new LogList(state);
+    root.appendChild(logList.element);
+    logHeader = logList.element.children[0] as LogHeader;
+    await logHeader.updateComplete;
   });
 
   afterEach(() => {
@@ -32,56 +36,54 @@
   describe('#constructor', () => {
     it('creates header cells for table with resize div', () => {
       const headers = Object.keys(constant.LOGS_HEADERS);
-      const el = logHeader.element as HTMLElement;
-      el.children.length.should.equal(7);
-      for (let i = 0; i < el.children.length; i++) {
-        el.children[i].id.should.equal(headers[i]);
-        if (i === el.children.length - 1) {
-          el.children[i].innerHTML.should.equal('');
+      logHeader.children.length.should.equal(7);
+      for (let i = 0; i < logHeader.children.length; i++) {
+        logHeader.children[i].id.should.equal(headers[i]);
+        if (i === logHeader.children.length - 1) {
+          logHeader.children[i].children.length.should.equal(0);
         } else {
-          el.children[i].innerHTML.should.equal('<div class="column-resize"></div>');
+          logHeader.children[i].children[0].outerHTML.should.equal('<div class="column-resize"></div>');
         }
         // Check aria label and index.
-        el.children[i].should.have.attr('ariaLabel');
-        el.children[i].should.have.attr('ariaColIndex');
-        el.children[i].ariaColIndex?.should.equal(i + 1);
+        logHeader.children[i].should.have.attr('aria-label');
+        logHeader.children[i].should.have.attr('aria-colindex');
+        logHeader.children[i].ariaColIndex?.should.equal(`${i + 1}`);
       }
     });
   });
 
   describe('on mouse drag', () => {
     it('has the resizing class', () => {
-      const monikerEl = logHeader.element.children[3] as HTMLElement;
+      const monikerEl = logHeader.children[3] as HTMLElement;
       const monikerWidth = state.currentFields['moniker'].width;
-
-      window.getComputedStyle(monikerEl).width.should.equal(monikerWidth);
+      monikerEl.style.width.should.equal(monikerWidth);
       monikerEl.children[0].classList.contains('resizing').should.equal(false);
       monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown'));
       monikerEl.children[0].classList.contains('resizing').should.equal(true);
     });
 
     it('resizes based on mouse move', () => {
-      const monikerEl = logHeader.element.children[3] as HTMLElement;
+      const monikerEl = logHeader.children[3] as HTMLElement;
       const monikerWidth = state.currentFields['moniker'].width;
+      const monikerWidthOnPage = monikerEl.clientWidth;
 
-      window.getComputedStyle(monikerEl).width.should.equal(monikerWidth);
+      monikerEl.style.width.should.equal(monikerWidth);
       monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown', { clientX: 0 }));
       document.dispatchEvent(new MouseEvent('mousemove', { clientX: 20 }));
-      window.getComputedStyle(monikerEl).width.should.equal('20px');
+      window.getComputedStyle(monikerEl).width.should.equal(`${monikerWidthOnPage + 20}px`);
     });
   });
 
   describe('on mouse double click', () => {
     it('resizes column to stored size', () => {
-      const monikerEl = logHeader.element.children[3] as HTMLElement;
+      const monikerEl = logHeader.children[3] as HTMLElement;
       const monikerWidth = state.currentFields['moniker'].width;
       const testWidth = 200;
 
-      window.getComputedStyle(monikerEl).width.should.equal(monikerWidth);
+      monikerEl.style.width.should.equal(monikerWidth);
       logHeader.setMaxCellWidth('moniker', testWidth);
       monikerEl.children[0].dispatchEvent(new MouseEvent('dblclick'));
       window.getComputedStyle(monikerEl).width.should.equal(`${testWidth}px`);
     });
   });
 });
-
diff --git a/webviews/logging/test/log_list.test.ts b/webviews/logging/test/log_list.test.ts
index 33f135c..8f439bf 100644
--- a/webviews/logging/test/log_list.test.ts
+++ b/webviews/logging/test/log_list.test.ts
@@ -32,10 +32,12 @@
   });
 
   describe('#constructor', () => {
-    it('crates a new empty view', () => {
+    it('crates a new empty view', async () => {
       const logsList = new LogList(state);
+      root.appendChild(logsList.element);
       logsList.element.children.length.should.equal(1);
-      logsList.element.children[0].id.should.equal('logs-table-header');
+      await (logsList.element.children[0] as LitElement).updateComplete;
+      logsList.element.children[0].nodeName.should.equal('LOG-HEADER');
       logsList.element.should.have.attr('aria-colcount');
       const expectedColumns = Object.keys(state.currentFields).length;
       logsList.element.getAttribute('aria-colcount')?.should.equal(`${expectedColumns}`);
@@ -59,7 +61,8 @@
       document.body.appendChild(logsList);
 
       logsList.children.length.should.equal(1);
-      logsList.children[0].id.should.equal('logs-table-header');
+      await (logsList.children[0] as LitElement).updateComplete;
+      logsList.children[0].nodeName.should.equal('LOG-HEADER');
       view.addLog(logDataForTest('core/foo'));
       logsList.children.length.should.equal(2);
 
@@ -108,7 +111,8 @@
       const logsList = view.element;
       document.body.appendChild(logsList);
       logsList.children.length.should.equal(2);
-      logsList.children[0].id.should.equal('logs-table-header');
+      await (logsList.children[0] as LitElement).updateComplete;
+      logsList.children[0].nodeName.should.equal('LOG-HEADER');
 
       const logLine = logsList.children[1] as LitElement;
       await logLine.updateComplete;
@@ -133,7 +137,8 @@
       const logsList = view.element;
       document.body.appendChild(logsList);
       logsList.children.length.should.equal(2);
-      logsList.children[0].id.should.equal('logs-table-header');
+      await (logsList.children[0] as LitElement).updateComplete;
+      logsList.children[0].nodeName.should.equal('LOG-HEADER');
 
       const logLine = logsList.children[1] as LitElement;
       await logLine.updateComplete;