DOM Visit

Whether you enabled sandbox or not, Haploid.js renders the sub-application into the following simulated DOM structure:

<haploid-html class="haploid-html">
  <haploid-head class="haploid-head">
    <haploid-title></haploid-title>
  </haploid-head>
  <haploid-body class="haploid-body"></haploid-body>
</haploid-html>

But some BOM APIs behave differently.

The document.documentElement refers to the ≶haploid-html> element above. If enabled the sandbox.enableHtmlPretending option, the document.documentElement will behave as native <html> as possible, including:

document.documentElement.constructor === HTMLHtmlElement;
document.documentElement.tagName === "HTML";
document.documentElement.nodeName === "HTML";
document.documentElement.version === "";
document.documentElement.parentNode === document;
document.documentElement.parentElement === null;
document.documentElement instanceof HTMLHtmlElement === true;

The document above is the proxy object.

DANGER

These pretendings can be fatal in some cases, such as when the parentElement is null, which can cause some logic to be traced to the real document to be broken

sandbox.enableBodyPretending、 sandbox.enableHeadPretending and sandbox.enableTitlePretending have a similar effect.

See Environmental Proxy for more details.

You can also use presetHeadHTML and presetBodyHTML to preset DOM elements such as:

container.registerApp({
  presetHeadHTML: `<meta name="keywords" content="">`,
  presetBodyHTML: `<article><main></main></article>`,
});

The following DOM structure will be generated:

<haploid-html class="haploid-html">
  <haploid-head class="haploid-head">
    <haploid-title></haploid-title>
    <meta name="keywords" content="" />
  </haploid-head>
  <haploid-body class="haploid-body">
    <article>
      <main></main>
    </article>
  </haploid-body>
</haploid-html>

If the preserveHTML option is enabled, and entry is in HTML format, then the DOM in it will be securely filtered and copied.

# DOM Visit

DOM Visit