Terminal.open: support WebComponent when checking DOM Node

[sangxxh]

Close #2642

First contribution.

I've replicated the issue and debugged.

Debug

• Before:

  

• After:

  

Replicate Issue

In demo/client.ts, find the if (document.location.pathname === "/test") block and put the code inside the DEBUG START/END comment blocks below into it. Go to http://localhost:3000/test to check.

if (document.location.pathname === "/test") {
  window.Terminal = Terminal;
  window.AttachAddon = AttachAddon;
  window.FitAddon = FitAddon;
  window.SearchAddon = SearchAddon;
  window.SerializeAddon = SerializeAddon;
  window.Unicode11Addon = Unicode11Addon;
  window.WebLinksAddon = WebLinksAddon;
  window.WebglAddon = WebglAddon;

  // ====================
  // DEBUG start
  // ====================

  class DemoWebComponent extends HTMLDivElement {
    constructor() {
      super();

      this.attachShadow({ mode: "open" });
    }
  }

  window.customElements.define("demo-webcomponent", DemoWebComponent, { extends: "div" });

  const appContainer = document.createElement("demo-webcomponent");
  terminalContainer.appendChild(appContainer);

  const shadowRoot = appContainer.attachShadow({ mode: "open" });

  const xtermContainer = document.createElement("div");
  xtermContainer.id = "xterm-container";
  shadowRoot.appendChild(xtermContainer);

  console.group("debug");
  console.log(xtermContainer.isConnected); // true
  console.log(document.body.contains(xtermContainer)); // false
  console.groupEnd();

  const term = new Terminal();
  // log to browser console
  term.setOption("logLevel", "debug");
  window.term = term;

  term.open(xtermContainer);
  term.write("Hello xTerm");

  // ====================
  // DEBUG END
  // ====================
}

[Tyriar]

Thanks for the thorough testing 👍