mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 11:07:10 +00:00
pj
9b9c7cf6e2
visibleLabel reads hintText first for an editable element. The dump never emitted it, so an empty web input fell through text, description and descendant text to its class name, and the model was shown an identifier no user can read on exactly the fields a labelling experiment varies. Same ladder as fieldHint in web-runtime.ts, so one field is named one way on both hosts. Claude-Session: https://claude.ai/code/session_01A5KmftdEJ49A9z5mF5ESrX
35 lines
1.5 KiB
HTML
35 lines
1.5 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" />
|
|
<div id="shadow-plain">plain</div>
|
|
</div>
|
|
<div id="shadow-scroller"><div id="shadow-scroller-content"></div></div>`;
|
|
</script>
|
|
</body>
|
|
</html>
|