Method open

src/browser/CoreBrowserTerminal.ts:393–581

* Opens the terminal within an element. * * @param parent The element to create the terminal within.

(parent: HTMLElement)

   * @param parent The element to create the terminal within.
   */
  public open(parent: HTMLElement): void {
    if (!parent) {
      throw new Error('Terminal requires a parent element.');
    }

    if (!parent.isConnected) {
      this._logService.debug('Terminal.open was called on an element that was not attached to the DOM');
    }

    // If the terminal is already opened
    if (this.element?.ownerDocument.defaultView && this._coreBrowserService) {
      // Adjust the window if needed
      if (this.element.ownerDocument.defaultView !== this._coreBrowserService.window) {
        this._coreBrowserService.window = this.element.ownerDocument.defaultView;
      }
      return;
    }

    this._document = parent.ownerDocument;
    if (this.options.documentOverride && this.options.documentOverride instanceof Document) {
      this._document = this.optionsService.rawOptions.documentOverride as Document;
    }

    // Create main element container
    this.element = this._document.createElement('div');
    this.element.dir = 'ltr';   // xterm.css assumes LTR
    this.element.classList.add('terminal');
    this.element.classList.add('xterm');
    parent.appendChild(this.element);

    // Performance: Use a document fragment to build the terminal
    // viewport and helper elements detached from the DOM
    const fragment = this._document.createDocumentFragment();
    this._viewportElement = this._document.createElement('div');
    this._viewportElement.classList.add('xterm-viewport');
    fragment.appendChild(this._viewportElement);

    this.screenElement = this._document.createElement('div');
    this.screenElement.classList.add('xterm-screen');
    this._register(addDisposableListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
    // Create the container that will hold helpers like the textarea for
    // capturing DOM Events. Then produce the helpers.
    this._helperContainer = this._document.createElement('div');
    this._helperContainer.classList.add('xterm-helpers');
    this.screenElement.appendChild(this._helperContainer);
    fragment.appendChild(this.screenElement);

    const textarea = this.textarea = this._document.createElement('textarea');
    this.textarea.classList.add('xterm-helper-textarea');
    this.textarea.setAttribute('aria-label', Strings.promptLabel.get());
    if (!Browser.isChromeOS) {
      // ChromeVox on ChromeOS does not like this. See
      // https://issuetracker.google.com/issues/260170397
      this.textarea.setAttribute('aria-multiline', 'false');
    }
    this.textarea.setAttribute('autocorrect', 'off');
    this.textarea.setAttribute('autocapitalize', 'off');
    this.textarea.setAttribute('spellcheck', 'false');