Parse processing instructions in HTML

concepts

1. Processing Instruction DOM Explorer

   Inject markup containing <?target data?> and inspect what the browser creates in the DOM. See the ProcessingInstruction node type, its target and data properties, and how you can traverse and query processing instructions via a TreeWalker.

2. Streaming Use Case

   Walk through how processing instructions with the names start and end are the anchors that enable out-of-order streaming: the browser uses <?start name?> and <?end name?> to locate the range in the DOM and replace the corresponding <template for="name"> placeholder.

3. Live PI Editor

   A live HTML editor where you type markup containing <?target data?> processing instructions. The right panel shows the DOM tree the parser produces — PI nodes highlighted in green as nodeType 7, with their .target and .data properties extracted by a TreeWalker. Four preset examples cover basic PIs, streaming anchors, xml-stylesheet, and multiple PIs in one document.

4. PI Query Lab

   Create ProcessingInstruction nodes via document.createProcessingInstruction(), then query and traverse them using a TreeWalker filtered to NodeFilter.SHOW_PROCESSING_INSTRUCTION. Filter by target name, delete individual nodes, and watch the live DOM tree update in real time.

5. XML Compat Demo

   Three real-world PI targets in one demo: xml-stylesheet (CSS association), streaming anchors (start/end for out-of-order streaming ranges), and custom application metadata PIs for embedding server configuration. Includes a live DOMParser test showing which nodes survive the HTML parsing round-trip in Chrome 150+.

6. PI MutationObserver

   Watch a MutationObserver fire in real time as ProcessingInstruction nodes (nodeType 7) are inserted into or removed from the DOM. Enter HTML with <?target data?> syntax, click Insert — the observer immediately logs each PI with its .target and .data properties. Remove individual PIs from a live list to see the observer fire on removal too. Four presets: xml-stylesheet, streaming anchors, multiple metadata PIs, nested PIs.

   Live API MutationObserver DOM

why it shipped

Processing instructions (<?target data?>) are a standard XML construct exposed as ProcessingInstruction nodes in the XML DOM. HTML parsers have historically ignored them — treating them as bogus comments — because HTML had no use for them. Chrome 150 adds two new reasons to support them: first, they are the boundary markers for the declarative out-of-order streaming feature (<?start slot?> / <?end slot?>); second, having them in the DOM makes XML-to-HTML porting easier and enables XML-style processing pipelines that operate on the live DOM. The new nodes are live, traversable, and serialisable.

the ProcessingInstruction node

• Node type: Node.PROCESSING_INSTRUCTION_NODE (7)
• Properties: .target (the name before the space) and .data (the rest)
• Example: <?xml-stylesheet href="style.css"?> → target="xml-stylesheet", data='href="style.css"'
• Serialised back to <?target data?> by innerHTML / outerHTML

references

• ChromeStatus entry
• MDN — ProcessingInstruction
• DOM spec — ProcessingInstruction