diff --git a/media/webview-logging.css b/media/webview-logging.css
index f07c533..6dd643f 100644
--- a/media/webview-logging.css
+++ b/media/webview-logging.css
@@ -12,7 +12,7 @@
   flex-direction: column;
 }
 
-th {
+#logs-table-header>div {
   background-color: var(--vscode-editor-background);
   border-bottom: 2px solid var(--vscode-panel-border);
   padding-bottom: 5px;
@@ -20,26 +20,40 @@
   top: 0;
 }
 
-td,
-th {
+#logs-table-header,
+log-view-row {
+  display: table-row-group;
+}
+
+log-view-row[hidden] {
+  display: none;
+}
+
+log-view-row>div {
+  display: table-row;
+}
+
+.log-list-cell,
+#logs-table-header>div {
   overflow: clip;
   text-align: left;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
+  display: table-cell;
 }
 
 td#moniker {
   direction: rtl;
 }
 
-table[wrap-log-text] .msg-cell,
-table:not([wrap-log-text]) .msg-cell:hover {
+#log-list[wrap-log-text] .msg-cell,
+#log-list:not([wrap-log-text]) .msg-cell:hover {
   text-overflow: clip;
   white-space: normal;
 }
 
-table:not([wrap-log-text]) .msg-cell:hover {
+#log-list:not([wrap-log-text]) .msg-cell:hover {
   background: var(--vscode-list-hoverBackground);
 }
 
@@ -50,26 +64,27 @@
 }
 
 #log-list {
+  display: table;
   table-layout: fixed;
   width: 100%;
   word-wrap: normal;
 }
 
-.log-entry {
+log-view-row {
   font-family: var(--vscode-editor-font-family);
   font-size: var(--vscode-editor-font-size);
   font-weight: var(--vscode-editor-font-weight);
 }
 
-.log-entry[data-severity="warn"] {
+log-view-row div[data-severity="warn"] {
   color: var(--vscode-list-warningForeground);
 }
 
-.log-entry[data-severity="error"] {
+log-view-row div[data-severity="error"] {
   color: var(--vscode-list-errorForeground);
 }
 
-.log-entry[data-moniker="<VSCode>"] {
+log-view-row div[data-moniker="<VSCode>"] {
   line-height: 75%;
   opacity: 70%;
 }
diff --git a/webviews/logging/components/log_header.ts b/webviews/logging/components/log_header.ts
index 438601f..4a028dc 100644
--- a/webviews/logging/components/log_header.ts
+++ b/webviews/logging/components/log_header.ts
@@ -16,7 +16,7 @@
     this.tableHeader = this.initTableHeader();
     for (let i = 0; i < keys.length; i++) {
       const header = keys[i] as LogField;
-      const headerCell = document.createElement('th');
+      const headerCell = document.createElement('div');
       this.maxWidths[header] = 0;
       headerCell.id = header;
       headerCell.style.width = fields[header].width;
@@ -44,8 +44,8 @@
    *
    * @return the header element.
    */
-  private initTableHeader(): HTMLTableRowElement {
-    const tableHeader = document.createElement('tr');
+  private initTableHeader(): HTMLDivElement {
+    const tableHeader = document.createElement('div');
     tableHeader.id = 'logs-table-header';
     return tableHeader;
   }
diff --git a/webviews/logging/components/log_list.ts b/webviews/logging/components/log_list.ts
index 892208e..cb2f47c 100644
--- a/webviews/logging/components/log_list.ts
+++ b/webviews/logging/components/log_list.ts
@@ -13,7 +13,7 @@
 export const WRAP_LOG_TEXT_ATTR = 'wrap-log-text';
 
 export class LogList {
-  private logList: HTMLTableElement;
+  private logList: HTMLDivElement;
   private logHeader: LogHeader;
   private hasPreviousLog: boolean = false;
   private maxWidths: Array<number>;
@@ -35,7 +35,7 @@
         }
       } else {
         for (const element of logRows) {
-          if (filter.accepts(element)) {
+          if (filter.accepts(element.children[0])) {
             element.removeAttribute('hidden');
           } else {
             element.setAttribute('hidden', '');
@@ -88,8 +88,8 @@
    *
    * @return the log list element.
    */
-  private initLogList(): HTMLTableElement {
-    let logList = document.createElement('table');
+  private initLogList(): HTMLDivElement {
+    let logList = document.createElement('div');
     logList.appendChild(this.logHeader.element);
     logList.id = 'log-list';
     return logList;
@@ -107,8 +107,7 @@
   }
 
   private appendLogElement(log: FfxLogData) {
-    const newRow = new LogRow(log, this.hasPreviousLog);
-    const element = newRow.element;
+    const element = new LogRow(log, this.hasPreviousLog);
     if (!this.filtersAllow(element)) {
       element.setAttribute('hidden', '');
     }
diff --git a/webviews/logging/components/log_row.ts b/webviews/logging/components/log_row.ts
index e951969..28f5515 100644
--- a/webviews/logging/components/log_row.ts
+++ b/webviews/logging/components/log_row.ts
@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 
 import * as constant from '../src/constants';
+import {ChildPart, html, LitElement} from 'lit';
+import {Directive, directive} from 'lit/directive.js';
+import {customElement, property, state} from 'lit/decorators.js';
 import { LogField } from '../src/fields';
 import {
   formatLogPayload, formatMalformedLog,
@@ -10,12 +13,33 @@
 } from '../src/format_log_text';
 import { FfxEventData, FfxLogData, LogData } from '../src/log_data';
 
-export class LogRow {
-  private logRow: HTMLElement;
-  private symbolized: string | undefined;
+class AttributeSetter extends Directive {
+  update(part: ChildPart, [attributes]: [any]) {
+    const domElement = (part.parentNode as Element);
+    for (const attr in attributes) {
+      const value = attributes[attr];
+      domElement.setAttribute(`data-${attr}`, value);
+    }
+    return this.render(attributes);
+  }
 
-  constructor(private log: FfxLogData, hasPreviousLog: boolean) {
-    this.logRow = this.initLogRow();
+  render(_attributes: any) {
+    return '';
+  }
+}
+@customElement('log-view-row')
+export class LogRow extends LitElement {
+  @property({attribute: true, type: Object})
+  public log: FfxLogData | undefined = undefined;
+
+  @state()
+  private symbolized: string | undefined;
+  private fields!: Record<string, any>;
+  private dataAttributes!: Record<string, any>;
+
+  constructor(log: FfxLogData, hasPreviousLog: boolean) {
+    super();
+    this.log = log;
     if (this.log.data.TargetLog !== undefined) {
       this.formatRow(this.log.data.TargetLog);
     } else if (this.log.data.FfxEvent !== undefined) {
@@ -30,48 +54,29 @@
     }
   }
 
-  /**
-   * Returns the core element.
-   */
-  get element() {
-    return this.logRow;
+  createRenderRoot() {
+    return this;
   }
 
-  /**
-   * Creates log row element containing useful metadata in `data-*` attributes.
-   *
-   * @param attributes the map of attribute name to value.
-   * @returns the log row html element.
-   */
-  private createLogRowAttributes(attributes: Record<string, any>) {
-    for (const attributeName in attributes) {
-      this.logRow.setAttribute(`data-${attributeName}`, attributes[attributeName]);
-    }
+  render() {
+    const attributeSetter = directive(AttributeSetter);
+    return html`
+      <div class="log-entry">
+        ${attributeSetter(this.dataAttributes)}
+        ${Object.keys(constant.LOGS_HEADERS).map(this.htmlForFieldKey.bind(this))}
+      </div>`;
   }
 
-  /**
-   * Creates the inner html of the fields.
-   *
-   * @param fields fields of the log element.
-   * @returns the inner html string with present fields filled.
-   */
-  private createLogInnerHtml(fields: Record<string, any>) {
-    let fieldKey: LogField;
-    for (fieldKey in constant.LOGS_HEADERS) {
-      let cell = document.createElement('td');
-      let content = '';
-      if (fields[fieldKey]) {
-        content = fields[fieldKey];
-      }
-      if (fieldKey === 'message') {
-        cell.classList.add('msg-cell');
-      } else {
-        cell.title = content;
-      }
-      cell.innerText = content;
-      cell.setAttribute('id', fieldKey);
-      this.logRow.appendChild(cell);
-    }
+  private htmlForFieldKey(fieldKey: string) {
+    const content = this.fields[fieldKey] ?? '';
+    return html`
+      <div
+        id="${fieldKey}"
+        title="${fieldKey === 'message' ? '' : content}"
+        class="log-list-cell${fieldKey === 'message' ? ' msg-cell' : ''}"
+      >
+        ${content}
+      </div>`;
   }
 
   /**
@@ -79,9 +84,9 @@
    */
   private formatFfxEventRow(event: FfxEventData, hasPreviousLog: boolean) {
     const fields =
-      { 'moniker': constant.FFX_MONIKER, 'message': messageForEvent(event, hasPreviousLog) };
-    this.createLogRowAttributes(fields);
-    this.createLogInnerHtml(fields);
+      {'moniker': constant.FFX_MONIKER, 'message': messageForEvent(event, hasPreviousLog)};
+    this.dataAttributes = fields;
+    this.fields = fields;
   }
 
   /**
@@ -89,9 +94,9 @@
    * @param malformedLog the malformed log to render as a message.
    */
   private formatMalformedRow(malformedLog: string) {
-    const fields = { 'message': formatMalformedLog(malformedLog) };
-    this.createLogRowAttributes(fields);
-    this.createLogInnerHtml(fields);
+    const fields = {'message': formatMalformedLog(malformedLog)};
+    this.dataAttributes = fields;
+    this.fields = fields;
   }
 
   /**
@@ -99,9 +104,9 @@
    * @param message  the message to display.
    */
   private formatViewerEventRow(message: string) {
-    const fields = { message, moniker: constant.VSCODE_SYNTHETIC_MONIKER };
-    this.createLogRowAttributes(fields);
-    this.createLogInnerHtml(fields);
+    const fields = {message, moniker: constant.VSCODE_SYNTHETIC_MONIKER};
+    this.dataAttributes = fields;
+    this.fields = fields;
   }
 
   /**
@@ -109,15 +114,15 @@
    */
   private formatRow(log: LogData) {
     let fields = {} as Record<string, any>;
-    const attributes = createAttributes(log);
-    this.createLogRowAttributes(attributes);
+    this.dataAttributes = createAttributes(log);
 
     let header: LogField;
     for (header in constant.LOGS_HEADERS) {
       let field = header.toLowerCase();
       fields[field] = this.getLogCell(log, field);
     }
-    this.createLogInnerHtml(fields);
+
+    this.fields = fields;
   }
 
   /**
@@ -151,15 +156,6 @@
         return '';
     }
   }
-
-  /**
-   * Initialize LogRow element.
-   */
-  private initLogRow(): HTMLElement {
-    let logRow = document.createElement('tr');
-    logRow.classList.add('log-entry');
-    return logRow;
-  }
 }
 
 const COMPONENT_URL_REGEX =
diff --git a/webviews/logging/test/filter.test.ts b/webviews/logging/test/filter.test.ts
index 6fc3991..233c48b 100644
--- a/webviews/logging/test/filter.test.ts
+++ b/webviews/logging/test/filter.test.ts
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import chai from 'chai'; // not esm
+import {LitElement} from 'lit';
 import { LogRow } from '../components/log_row';
 import { FilterExpression, OrExpression, parseFilter } from '../src/filter';
 
@@ -11,9 +12,11 @@
 });
 
 describe('filtering', () => {
+  let testLitElements: LitElement[] = [];
   let testElements: HTMLElement[] = [];
-  before(() => {
-    testElements = [
+
+  before(async () => {
+    testLitElements = [
       new LogRow(
         {
           data: {
@@ -47,7 +50,7 @@
           },
           timestamp: 12345,
           version: 1
-        }, false).element,
+        }, false),
       new LogRow( //2
         {
           data: {
@@ -83,7 +86,7 @@
           },
           timestamp: 12345,
           version: 1
-        }, false).element,
+        }, false),
       new LogRow(
         {
           data: {
@@ -119,8 +122,20 @@
           },
           timestamp: 12345,
           version: 1
-        }, false).element,
+        }, false),
     ];
+
+    for (const index in testLitElements) {
+      document.body.appendChild(testLitElements[index]);
+      await testLitElements[index].updateComplete;
+      testElements.push(testLitElements[index].children[0] as HTMLElement);
+    }
+  });
+
+  after(() => {
+    for (const index in testLitElements) {
+      testLitElements[index].remove();
+    }
   });
 
   describe('FilterExpression', () => {
diff --git a/webviews/logging/test/log_list.test.ts b/webviews/logging/test/log_list.test.ts
index d50d5d0..bd38503 100644
--- a/webviews/logging/test/log_list.test.ts
+++ b/webviews/logging/test/log_list.test.ts
@@ -10,6 +10,7 @@
 import { Filter } from '../src/filter';
 import { LogList, WRAP_LOG_TEXT_ATTR } from '../components/log_list';
 import { State } from '../src/state';
+import {LitElement} from 'lit';
 
 before(function () {
   chai.should();
@@ -49,28 +50,31 @@
   });
 
   describe('#addLog', () => {
-    it('appends a log', () => {
+    it('appends a log', async () => {
       const view = new LogList(state);
       const logsList = view.element;
+      document.body.appendChild(logsList);
 
       logsList.children.length.should.equal(1);
       logsList.children[0].id.should.equal('logs-table-header');
       view.addLog(logDataForTest('core/foo'));
       logsList.children.length.should.equal(2);
 
-      const logLine = logsList.children[1] as HTMLElement;
-      logLine.should.have.class('log-entry');
-      logLine.should.have.attr('data-moniker', 'core/foo');
-      logLine.should.have.attr('data-pid', '123');
-      logLine.should.have.attr('data-tid', '456');
-      logLine.hidden.should.be.false;
+      const logLine = logsList.children[1] as LitElement;
+      await logLine.updateComplete;
+      logLine.children[0].should.have.class('log-entry');
+      logLine.children[0].should.have.attr('data-moniker', 'core/foo');
+      logLine.children[0].should.have.attr('data-pid', '123');
+      logLine.children[0].should.have.attr('data-tid', '456');
+      (logLine.children[0] as HTMLElement).hidden.should.be.false;
 
       const testFields = ['000000.12', '123', '456', 'core/foo', 'my_tag', 'Info', 'msg'];
       let field: keyof typeof testFields;
       for (field in testFields) {
-        const logField = logLine.children[field] as HTMLElement;
+        const logField = logLine.children[0].children[field] as HTMLElement;
         logField.innerText.should.equal(testFields[field]);
       }
+      logsList.remove();
     });
 
 
@@ -92,44 +96,50 @@
       logLine.hidden.should.be.true;
     });
 
-    it('handles ffx events', () => {
+    it('handles ffx events', async () => {
       const view = new LogList(state);
       let moniker = constant.FFX_MONIKER;
       const msg = 'Logger lost connection to target. Retrying...';
       view.addLog(ffxEventForTest('TargetDisconnected'));
 
       const logsList = view.element;
+      document.body.appendChild(logsList);
       logsList.children.length.should.equal(2);
       logsList.children[0].id.should.equal('logs-table-header');
 
-      const logLine = logsList.children[1] as HTMLElement;
+      const logLine = logsList.children[1] as LitElement;
+      await logLine.updateComplete;
 
-      logLine.children.length.should.equal(7);
-      logLine.should.have.class('log-entry');
-      logLine.should.have.attr('data-moniker', '<ffx>');
-      logLine.hidden.should.be.false;
+      logLine.children[0].children.length.should.equal(7);
+      logLine.children[0].should.have.class('log-entry');
+      logLine.children[0].should.have.attr('data-moniker', '<ffx>');
+      (logLine.children[0] as HTMLElement).hidden.should.be.false;
 
-      let monikerEl = logLine.children[3] as HTMLElement;
-      let msgEl = logLine.children[6] as HTMLElement;
+      let monikerEl = logLine.children[0].children[3] as HTMLElement;
+      let msgEl = logLine.children[0].children[6] as HTMLElement;
       monikerEl.innerText.should.equal(moniker);
       msgEl.innerText.should.equal(msg);
+      logsList.remove();
     });
 
-    it('handles malformed logs', () => {
+    it('handles malformed logs', async () => {
       const view = new LogList(state);
       const msg = 'Malformed target log: oh no something went wrong';
       view.addLog(malformedLogForTest('oh no something went wrong'));
 
       const logsList = view.element;
+      document.body.appendChild(logsList);
       logsList.children.length.should.equal(2);
       logsList.children[0].id.should.equal('logs-table-header');
 
-      const logLine = logsList.children[1] as HTMLElement;
-      logLine.children.length.should.equal(7);
-      logLine.should.have.class('log-entry');
-      logLine.hidden.should.be.false;
-      let msgEl = logLine.children[6] as HTMLElement;
+      const logLine = logsList.children[1] as LitElement;
+      await logLine.updateComplete;
+      logLine.children[0].children.length.should.equal(7);
+      logLine.children[0].should.have.class('log-entry');
+      (logLine.children[0] as HTMLElement).hidden.should.be.false;
+      let msgEl = logLine.children[0].children[6] as HTMLElement;
       msgEl.innerText.should.equal(msg);
+      logsList.remove();
     });
 
     it('detects user hovering logs', () => {
diff --git a/webviews/logging/test/log_row.test.ts b/webviews/logging/test/log_row.test.ts
index efad7f7..8141bac 100644
--- a/webviews/logging/test/log_row.test.ts
+++ b/webviews/logging/test/log_row.test.ts
@@ -47,7 +47,7 @@
 
 describe('LogRow', () => {
   describe('#constructor', () => {
-    it('adds title to to non-message cells', () => {
+    it('adds title to to non-message cells', async () => {
       const logRow = new LogRow(logDataForTest({
         root: {
           message: {
@@ -56,19 +56,22 @@
           keys: null,
           printf: null,
         }
-      }), false).element;
+      }), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       const testFields = ['000012.35', '123', '456', 'core/foo', 'bar,baz', 'Info', 'hello vscode'];
       let field: keyof typeof testFields;
       for (field in testFields) {
         if (testFields[field] === 'hello vscode') {
           return;
         }
-        const logField = logRow.children[field] as HTMLElement;
+        const logField = logRow.children[0].children[field] as HTMLElement;
         logField.title.should.equal(testFields[field]);
       }
+      logRow.remove();
     });
 
-    it('formats target logs', () => {
+    it('formats target logs', async () => {
       const logRow = new LogRow(logDataForTest({
         root: {
           message: {
@@ -77,16 +80,19 @@
           keys: null,
           printf: null,
         }
-      }), false).element;
+      }), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       const testFields = ['000012.35', '123', '456', 'core/foo', 'bar,baz', 'Info', 'hello vscode'];
       let field: keyof typeof testFields;
       for (field in testFields) {
-        const logField = logRow.children[field] as HTMLElement;
+        const logField = logRow.children[0].children[field] as HTMLElement;
         logField.innerText.should.equal(testFields[field]);
       }
+      logRow.remove();
     });
 
-    it('formats structured logs', () => {
+    it('formats structured logs', async () => {
       const logRow = new LogRow(logDataForTest({
         root: {
           message: {
@@ -98,18 +104,21 @@
           },
           printf: null,
         }
-      }), false).element;
+      }), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       const testFields =
         ['000012.35', '123', '456', 'core/foo', 'bar,baz',
           'Info', 'hello vscodeos=fuchsia number=1'];
       let field: keyof typeof testFields;
       for (field in testFields) {
-        const logField = logRow.children[field] as HTMLElement;
+        const logField = logRow.children[0].children[field] as HTMLElement;
         logField.innerText.should.equal(testFields[field]);
       }
+      logRow.remove();
     });
 
-    it('formats printf logs', () => {
+    it('formats printf logs', async () => {
       const logRow = new LogRow(logDataForTest({
         root: {
           message: null,
@@ -119,17 +128,20 @@
             args: ['Fuchsia', 1]
           },
         }
-      }), false).element;
+      }), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       const testFields =
         ['000012.35', '123', '456', 'core/foo', 'bar,baz', 'Info', '%s is #%d args=[Fuchsia, 1]'];
       let field: keyof typeof testFields;
       for (field in testFields) {
-        const logField = logRow.children[field] as HTMLElement;
+        const logField = logRow.children[0].children[field] as HTMLElement;
         logField.innerText.should.equal(testFields[field]);
       }
+      logRow.remove();
     });
 
-    it('formats symbolized log', () => {
+    it('formats symbolized log', async () => {
       const logRow = new LogRow(symbolizedDataForTest({
         root: {
           message: {
@@ -138,54 +150,69 @@
           keys: null,
           printf: null,
         }
-      }), false).element;
+      }), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       const testFields =
         ['000000.12', '123', '456', 'core/foo', 'my_tag', 'Info', 'symbolized'];
       let field: keyof typeof testFields;
       for (field in testFields) {
-        const logField = logRow.children[field] as HTMLElement;
+        const logField = logRow.children[0].children[field] as HTMLElement;
         logField.innerText.should.equal(testFields[field]);
       }
+      logRow.remove();
     });
 
-    it('formats logging started events', () => {
-      let logRow = new LogRow(ffxEventForTest('LoggingStarted'), false).element;
+    it('formats logging started events', async () => {
+      let logRow = new LogRow(ffxEventForTest('LoggingStarted'), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       let moniker = constant.FFX_MONIKER;
       let msg = messageForEvent('LoggingStarted', false);
-      let monikerEl = logRow.children[3] as HTMLElement;
-      let msgEl = logRow.children[6] as HTMLElement;
+      let monikerEl = logRow.children[0].children[3] as HTMLElement;
+      let msgEl = logRow.children[0].children[6] as HTMLElement;
 
       monikerEl.innerText.should.equal(moniker);
       msgEl.innerText.should.equal(msg);
+      logRow.remove();
 
-      logRow = new LogRow(ffxEventForTest('LoggingStarted'), true).element;
+      logRow = new LogRow(ffxEventForTest('LoggingStarted'), true);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       msg = messageForEvent('LoggingStarted', true);
-      monikerEl = logRow.children[3] as HTMLElement;
-      msgEl = logRow.children[6] as HTMLElement;
+      monikerEl = logRow.children[0].children[3] as HTMLElement;
+      msgEl = logRow.children[0].children[6] as HTMLElement;
 
       monikerEl.innerText.should.equal(moniker);
       msgEl.innerText.should.equal(msg);
+      logRow.remove();
     });
 
-    it('formats target disconnected events', () => {
-      const logRow = new LogRow(ffxEventForTest('TargetDisconnected'), false).element;
+    it('formats target disconnected events', async () => {
+      const logRow = new LogRow(ffxEventForTest('TargetDisconnected'), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       let moniker = constant.FFX_MONIKER;
       let msg = messageForEvent('TargetDisconnected', true);
-      let monikerEl = logRow.children[3] as HTMLElement;
-      let msgEl = logRow.children[6] as HTMLElement;
+      let monikerEl = logRow.children[0].children[3] as HTMLElement;
+      let msgEl = logRow.children[0].children[6] as HTMLElement;
 
       monikerEl.innerText.should.equal(moniker);
       msgEl.innerText.should.equal(msg);
+      logRow.remove();
     });
 
-    it('formats malformed log', () => {
-      const logRow = new LogRow(malformedLogForTest('hello world'), false).element;
+    it('formats malformed log', async () => {
+      const logRow = new LogRow(malformedLogForTest('hello world'), false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
       let msg = 'Malformed target log: hello world';
-      let msgEl = logRow.children[6] as HTMLElement;
+      let msgEl = logRow.children[0].children[6] as HTMLElement;
       msgEl.innerText.should.equal(msg);
+      logRow.remove();
     });
 
-    it('formats viewer synthesized messages', () => {
+    it('formats viewer synthesized messages', async () => {
       const msg = 'Logs are cool';
       const data = {
         data: {
@@ -195,11 +222,14 @@
         timestamp: 0,
         version: 0
       };
-      const logRow = new LogRow(data, false).element;
-      const monikerEl = logRow.children[3] as HTMLElement;
-      const msgEl = logRow.children[6] as HTMLElement;
+      const logRow = new LogRow(data, false);
+      document.body.appendChild(logRow);
+      await logRow.updateComplete;
+      const monikerEl = logRow.children[0].children[3] as HTMLElement;
+      const msgEl = logRow.children[0].children[6] as HTMLElement;
       monikerEl.innerText.should.equal(constant.VSCODE_SYNTHETIC_MONIKER);
       msgEl.innerText.should.equal(msg);
+      logRow.remove();
     });
   });
 });