`<pdf-page>` parts: `::part()` names

Works in all major browsers

Since July 2026

WebPDF works in Chrome and Edge 125, Firefox 153 and Safari 18, on desktop and mobile, and in every later version: the oldest versions its PDF.js build supports, which already have every platform feature WebPDF needs. Since July 2026, that is every major browser.

The parts of a <pdf-page> are the elements in its shadow root that you can style with the ::part() pseudo-element: its layers, links, form fields, signature cards and controls. Everything else in the page stays private.

Syntax

css

pdf-page::part(link) {
  /* ... */
}

A part name that is not a CSS identifier is escaped: pdf-page::part(\.js), pdf-page::part(\<input\>), pdf-page::part(\[name\=Text1\]). Spaces in a form field's name become -.

Layers

Part	Element	Is
`.js` `canvas` `raster` `image` `layer` or `ium` `…`	`<canvas>`	The page drawn by PDF.js (`.js`) or PDFium (`ium`); no engine token while it waits for its first draw.
`svg` `vector` `image` `layer`	`<svg>`	The page drawn as SVG.
`scale` `layer`	`<scale>`	The overlay that holds the text, the annotations, the signatures and the controls.
`text`	`<text>`	The selectable text; empty with `-=text`.
`anno`	`<anno>`	The links and form fields; empty with `-=anno`.

Links and form fields

Part	Element	Is
`sect`	`<section>`	One annotation.
`link` `<a>` `[name=…]` `subanno`	`<a>`	A link; it opens in a new tab, or turns the page for a link inside the file.
`<input>` `[name=…]` `subanno`	`<input>`	A text field, a checkbox or a radio button.
`<select>` `[name=…]` `subanno`	`<select>`	A list or combo box.
`<textarea>` `[name=…]` `subanno`	`<textarea>`	A multi-line text field.
`<button>` `[name=…]` `subanno`	`<button>`	A button.

Signatures

A part ending in -state uses each signature's own status: pending, verified, unknown, untrusted, expired, revoked or invalid, such as sig-verified.

Part	Element	Is
`signatures`	`<sigs>`	The page's signature hotspots and cards.
`sig` `sig-state`	`<button>`	A hotspot over a signature field: always there, outlined while the cards show.
`sig-card` `sig-card-state`	`<article>`	A card: compact in the page while the cards show, full as a popover.
`sig-corner`	`<div>`	The cards of signatures without a visible field, top right.
`sig-card-status`	`<span>`	A card's status word.
`sig-card-signer`	`<bdi>`	A card's signer.
`sig-card-close`	`<button>`	A card's ×.
`sig-card-when`	`<p>`	A compact card's date, or its worst check.
`sig-card-checks`	`<ul>`	A card's checks.
`sig-check` `sig-check-ok` (or `-warn`, `-bad`, `-none`)	`<li>`	One check: integrity, signer, time or revocation.
`sig-card-statement`	`<p>`	The signer's own words: reason, location, contact.
`sig-card-notes`	`<ul>`	Further warnings.
`sig-card-details`	`<details>`	Field, format and algorithm.
`sig-card-chain`	`<ol>`	The certificate path.
`sig-card-cer`	`<button>`	A certificate's Save .cer.
`sig-card-fingerprint`	`<code>`	A certificate's SHA-256 fingerprint.

Controls

Part	Element	Is
`controls`	`<ctl>`	The controls: the bar and its menu, over the page.
`bar`	`<nav>`	The bar, on the edge `toolbar` names; it fits its page.
`bar-group`	`<span>`	One group of its buttons.
`bar-prev` `bar-button`	`<button>`	‹ the previous page (˄ on an upright bar).
`bar-no`	`<label>`	The page number field and its `/ N` (`N` under it on an upright bar).
`bar-next` `bar-button`	`<button>`	› the next page (˅ on an upright bar).
`bar-rotate-left` `bar-button`	`<button>`	⟲ rotate left.
`bar-rotate-right` `bar-button`	`<button>`	⟳ rotate right.
`bar-zoom-out` `bar-button`	`<button>`	− smaller.
`bar-zoom` `bar-button`	`<button>`	The scale in %; a click resets it.
`bar-zoom-in` `bar-button`	`<button>`	+ larger.
`bar-fullscreen` `bar-button`	`<button>`	⛶ fullscreen.
`bar-more` `bar-button`	`<button>`	⋯ the menu.
`menu`	`<div>`	The menu: a popover in the top layer, anchored to ⋯.
`menu-bar`	`<div>`	Its row of rotation, scale and fullscreen when the bar has no room for them.
`menu-section`	`<div>`	One group of items.
`menu-item`	`<button>`	An item.

Examples

Highlighting links and fields

HTML

html

<pdf-file id=f src=//new.webpdf.pro/forms.pdf></pdf-file>
<pdf-page of=f scale=0.5></pdf-page>

CSS

css

pdf-page::part(link) {
  background: oklch(62% 0.24 27 / 0.1);
}
pdf-page::part(\<input\>) {
  background: oklch(96% 0.04 95);
}

Result

A rounder bar

HTML

html

<pdf-file id=f src=//pdf.ist/web.pdf></pdf-file>
<pdf-page of=f controls scale=0.4></pdf-page>

CSS

css

pdf-page::part(bar) {
  border-radius: 2rem;
}

Result

Specifications

Not part of any specification. <pdf-file> and <pdf-page> are autonomous custom elements defined by WebPDF.pro. It implements:

Specification
CSS Shadow Parts # part

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`::part()`	125	125	153	111	18	125	153	83	18	27	125	18

: Full support

<pdf-page> parts: ::part() names

HTML

CSS

Result

HTML

CSS

Result

Legend

`<pdf-page>` parts: `::part()` names