reference target

Browser experiments & working notes

Field notes / six reference scenarios

Follow the
reference.

Inward references, outward connections and shadow-boundary checks.

Preparing the controls…

Browser details
Current path
Loading…
Native API surface
Checking…
Active adapters
Checking…

Automatic checks for the native property. Force fallback loads the selected adapters. Browser alone leaves them out.

01 / Inward reference

An outside label

A label names a component by ID; the component selects its internal checkbox.

Try: Click the label, then the checkbox.

DOM observationWaiting for setup.

02 / Inward reference

A panel inside the component

The outside button’s popovertarget points to a host, which selects its internal panel.

Try: Open the note. Dismiss it with Escape or Close.

DOM observationWaiting for setup.

03 / Inward name reference

Choose part of a name

The input references a label component. Its designated text is separate from the rest of its content.

Check: Inspect the input’s accessible name. The intended text is “Delivery preference.”

DOM observation — not the computed nameWaiting for setup.

04 / Boundary: attributes stay put

A name on the host

This host has aria-label="Host-only accessible name". Its inner button has its own visible text.

Check: The inner button keeps its own text and has no aria-label.

DOM observationWaiting for setup.

05 / Boundary: outward string references

Two connections that do not exist

The host points to an outside popover. One inner button has no target attribute; another uses the outside ID as a string.

Try: Neither button should open the panel, in any mode.

DOM observationWaiting for setup.

06 / Explicit outward connection

Pass the element itself

Here the component’s script assigns the outside popover to its inner button’s popoverTargetElement.

Try: Open the outside panel with fallback off. This uses native element reflection.

DOM observationWaiting for setup.

Functional JavaScript sizes

Functional page JavaScript

5.442 KB 2.242 KB gzip

Always loaded.

Fallback additional

29.693 KB 10.083 KB gzip

Core + selected adapters.

Fallback route total

35.135 KB 12.325 KB gzip

Always-loaded and fallback files; shared files counted once.

Minified / gzip. 1 KB = 1,000 bytes. Demo-only syntax highlighting is excluded from the functional totals and reported separately below.

Whole-page delivery context

HTML document

20.840 KB 1 request

Generated markup, including these measurements.

Initial supporting assets

19.099 KB raw 18.476 KB local transfer · 5 requests

Styles, icon, and the highlighting scheduler; functional JS is separate above.

Initial page with fallback

75.074 KB raw 51.641 KB local transfer · 10 requests

Document + functional fallback path + initial supporting assets, with unique files counted once.

Deferred highlighting

16.700 KB raw 7.831 KB local transfer · 8 requests

Engine, theme, and this page’s grammar closure, requested after a source disclosure opens or during idle time.

“Local transfer” matches the included development server: gzip JavaScript sidecars, but uncompressed HTML, CSS, and SVG. GitHub Pages, browser caching, HTTP headers, and production compression can change transferred bytes and request scheduling. Module preloads fetch functional modules early without evaluating the app and do not add duplicate transfers.

Inspect the 4 generated JavaScript files

Selected adapters: labels, popover-targets, text-names.

Gzip totals sum each compressed file. The fallback and native-probe routes are mutually exclusive. Separate CSS files, HTML, JSON, source maps, HTTP headers, and Microlighter assets are excluded. Component styles embedded in JavaScript are included. Transfer sizes depend on compression and caching. Microlighter MIT license.

Files included in this page’s totals
FileDeliveryMinifiedGzip
scenarios/main.js Page 1.854 KB 0.880 KB
shared/chunks/app-S3BP47PD.js Page 3.446 KB 1.224 KB
shared/chunks/chunk-S2QLMWTP.js Page 0.142 KB 0.138 KB
shared/chunks/reference-target.setup-63HUVE2L.js Fallback additional 29.693 KB 10.083 KB

Inspect the size manifest

Implementation notes & limitations

DOM evidence and fallback scope

Label activation does not create native .control or .labels links. Naming uses component-provided text. The panel examples require the browser’s Popover API.

These adapters approximate selected relationships. DOM observations do not report computed accessible names or certify accessibility behavior.

Automatic checks for the native property; Browser alone loads no fallback. Test keyboard and assistive-technology behavior separately.

Why this page adds metadata and a text provider

Each shadow root here comes from a real, parser-created <template shadowrootmode="open">. A browser that ignores shadowrootreferencetarget consumes the template anyway. The matching data-reference-target on its host preserves that ID for the fallback’s hydrate(document) call.

<rt-scenario-checkbox id="checkbox-host"
    data-reference-target="control">
  <template shadowrootmode="open"
      shadowrootreferencetarget="control">
    <input id="control" type="checkbox">
  </template>
</rt-scenario-checkbox>

The label component also publishes data-label-text. Only that component opts into the text adapter; the callback reads the host’s public text value instead of looking inside its shadow root.

textNames({
  getText(host, kind) {
    if (host.localName !== 'rt-scenario-label' || kind !== 'label') {
      return null;
    }
    return host.getAttribute('data-label-text');
  },
});

The outward example uses ordinary component wiring, with no fallback calls:

const button = this.shadowRoot.getElementById('button');
const panel = document.getElementById(this.getAttribute('popovertarget'));
button.popoverTargetElement = panel;