mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 11:07:10 +00:00
pj
5404909e12
the target enumeration carries none of the three, so they reach a spec through the ax handle alone, and a selector naming one of them resolves against that same reading. the shadow fixture holds the focused control inside its shadow root, where document.activeElement names the mount element and only a producer that descends finds the field.
46 lines
2.1 KiB
HTML
46 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html id="page">
|
|
<head id="page-head">
|
|
<meta id="page-charset" charset="utf-8" />
|
|
<title id="page-title">fact parity: shadow dom</title>
|
|
</head>
|
|
<body id="page-body">
|
|
<!-- Shaped like Compose for Web: one mount element owning a shadow root
|
|
that holds the canvas plus an accessibility overlay whose nodes are
|
|
pointer-events: none, so taps fall through to the canvas. A producer
|
|
that stops at the shadow boundary reports this whole app as one node. -->
|
|
<div id="host">
|
|
<div id="host-light-child">light child, no slot to render into</div>
|
|
</div>
|
|
<script id="page-script">
|
|
const root = document.getElementById("host").attachShadow({ mode: "open" });
|
|
root.innerHTML = `
|
|
<style id="shadow-style">
|
|
#shadow-surface { position: absolute; inset: 0; }
|
|
#shadow-overlay { position: absolute; inset: 0; pointer-events: none; }
|
|
#shadow-scroller { width: 320px; height: 120px; overflow: auto; }
|
|
#shadow-scroller-content { height: 600px; }
|
|
</style>
|
|
<canvas id="shadow-surface" width="420" height="640"></canvas>
|
|
<div id="shadow-overlay">
|
|
<button id="shadow-save">save</button>
|
|
<button id="shadow-cancel" disabled>cancel</button>
|
|
<input id="shadow-amount" type="text" value="10" placeholder="0.00" />
|
|
<input id="shadow-password" type="password" placeholder="Password" />
|
|
<input id="shadow-agree" type="checkbox" />
|
|
<select id="shadow-choice">
|
|
<option id="shadow-choice-first">first</option>
|
|
</select>
|
|
<div id="shadow-plain">plain</div>
|
|
</div>
|
|
<div id="shadow-scroller"><div id="shadow-scroller-content"></div></div>`;
|
|
// document.activeElement names the HOST while focus is inside its shadow
|
|
// root, so a producer that does not descend reports focus on the mount
|
|
// element and never on the control, which is what a Compose for Web page
|
|
// looks like from the outside.
|
|
root.getElementById("shadow-agree").checked = true;
|
|
root.getElementById("shadow-save").focus();
|
|
</script>
|
|
</body>
|
|
</html>
|