v150 · HTML · DOM

XML Compat Demo

Processing instructions were common in XHTML and XML documents. Chrome 150 now preserves them in the HTML parser too. Explore three real-world PI targets: xml-stylesheet (associating a stylesheet), streaming anchors (start/end), and custom application metadata PIs.

Checking PI support…

xml-stylesheet processing instruction

The xml-stylesheet PI is a W3C recommendation for associating a stylesheet with an XML document. Chrome 150 now preserves it in HTML too — the browser sees it as a ProcessingInstruction node with target="xml-stylesheet".

<!-- In XML, this was common: -->
<?xml-stylesheet href="print.css" media="print"?>
<?xml-stylesheet href="mobile.css" media="(max-width:768px)"?>
<html>
  <body>
    <!-- content -->
  </body>
</html>

nodeType: 7 (Node.PROCESSING_INSTRUCTION_NODE)

target: "xml-stylesheet"

data: 'href="print.css" media="print"'

serialised: <?xml-stylesheet href="print.css" media="print"?>

Click button above…

Streaming anchor PIs: <?start slot?> and <?end slot?>

Chrome 150's declarative out-of-order streaming uses processing instructions as range markers. The browser inserts a chunk of HTML at the range defined by matching start and end PIs, replacing any placeholder template.

<!-- Out-of-order streaming template pattern -->
<?start hero-section?>
<template id="hero-section">
  <div class="skeleton">Loading hero…</div>
</template>
<?end hero-section?>

<!-- Later, the server streams: -->
<script type="inject" slot="hero-section">
  <section class="hero">Real content here</section>
</script>

The start and end PIs serve as bookmarks the streaming runtime can locate via a TreeWalker filtered to SHOW_PROCESSING_INSTRUCTION, matching by .data (the slot name).

Custom application PIs

Any <?target data?> form is now preserved. Applications can use them for server-to-client configuration, feature flags, or metadata embedded in the HTML stream.

<!-- Server embeds config via PIs -->
<?app-config theme=dark locale=en-US?>
<?feature-flags ab-variant=B dark-mode=enabled?>
<?build-meta version=2.4.1 git-sha=f85418f?>

<!-- JS reads them: -->
<script>
  const walker = document.createTreeWalker(
    document,
    NodeFilter.SHOW_PROCESSING_INSTRUCTION
  );
  let node;
  while ((node = walker.nextNode())) {
    console.log(node.target, node.data);
  }
</script>

Create PIs with the form below:

None injected yet.

Live HTML parser test

Use DOMParser.parseFromString(html, 'text/html') to parse markup containing PIs. Inspect which nodes survive.

Input HTML

DOM tree result

Click Parse →

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference