Make DOM ids begin with prefix 'id-'

packages/apputils/src/domutils.ts

@@ -5,6 +5,8 @@ import { ArrayExt } from '@phosphor/algorithm';
 
 import { ElementExt } from '@phosphor/domutils';
 
+import { UUID } from '@phosphor/coreutils';
+
 /**
  * The namespace for DOM utilities.
  */
@@ -31,4 +33,11 @@ export namespace DOMUtils {
   ): HTMLElement {
     return parent.querySelector(`.${className}`) as HTMLElement;
   }
+
+  /**
+   * Create a DOM id with prefix "id-" to solve bug for UUIDs beginning with numbers.
+   */
+  export function createDomID(): string {
+    return `id-${UUID.uuid4()}`;
+  }
 }

packages/apputils/src/mainareawidget.ts

@@ -1,8 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { UUID } from '@phosphor/coreutils';
-
 import { Message } from '@phosphor/messaging';
 
 import { BoxLayout, Widget } from '@phosphor/widgets';
@@ -11,6 +9,8 @@ import { Spinner } from './spinner';
 
 import { Toolbar } from './toolbar';
 
+import { DOMUtils } from './domutils';
+
 /**
  * A widget meant to be contained in the JupyterLab main area.
  *
@@ -29,7 +29,8 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget {
   constructor(options: MainAreaWidget.IOptions<T>) {
     super(options);
     this.addClass('jp-MainAreaWidget');
-    this.id = UUID.uuid4();
+    this.id = DOMUtils.createDomID();
+    console.log('The ID is:', this.id);
 
     const content = (this._content = options.content);
     const toolbar = (this._toolbar = options.toolbar || new Toolbar());
@@ -43,7 +44,7 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget {
     layout.addWidget(content);
 
     if (!content.id) {
-      content.id = UUID.uuid4();
+      content.id = DOMUtils.createDomID();
     }
     content.node.tabIndex = -1;