v148 · in developer trial

Parse processing instructions in HTML

Processing instructions (`<?target data>`) are an existing DOM construct, exposed in XML, that allows node objects that are not elements but can have some semantic meaning for the processing of a document. Chrome 150 starts parsing them inside HTML so they can be used to denote streaming ranges, custom highlights, and other annotations without inventing new elements.

concepts

  1. PI Tree Inspector

    Paste HTML containing processing instructions and see the parsed DOM tree, with PI nodes highlighted. Compares the live-supported parse against the legacy "ignore PIs" mode.

  2. Range Marker Highlighter

    Wrap content in <?start name="X">...<?end> markers and watch the matching ranges get highlighted in real time. The same pattern declarative partial updates uses, exposed as the smallest possible interactive demo.

  3. Annotation Stream

    Edit HTML with <?highlight start?>, <?comment start?>, and <?todo start?> processing instructions. Chrome 150 parses them into ProcessingInstruction DOM nodes; the renderer extracts annotation ranges and renders them with visual highlights.

  4. PI Annotation System

    A document editor that uses <?annotation?>, <?i18n?>, and <?cms?> processing instructions as invisible markers. Edit HTML, parse it with a TreeWalker(SHOW_PROCESSING_INSTRUCTION), inspect all PI nodes in an annotation panel, and serialize the document with PIs intact. Covers four real-world use cases: metadata embedding, CMS content markers, i18n string IDs, and streaming range anchors.

  5. PI Query Explorer

    Paste any HTML with processing instructions and use a live TreeWalker(SHOW_PROCESSING_INSTRUCTION) to query, filter, and inspect PI nodes. Filter by target name via chips or a text input, see DOM path for each matched node, and copy the generated TreeWalker code. Four presets: streaming ranges, annotations, CMS markers, i18n strings.

why it shipped

Work on out-of-order streaming showed that defining declarative ranges with elements is insufficient — they affect CSS relationships and the document outline in ways the author didn't ask for. A "lighter" declarative annotation was needed, one that doesn't show up as an element. Processing instructions were already a DOM node type defined for XML; this feature simply enables the HTML parser to recognise them too, unlocking declaratively denoted CSS custom highlights, streaming range markers (the <?start name=X> / <?end> pattern), and parser directives.

references

implementation reference

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