PyScript 报错 SyntaxError: '#3dplot' is not a valid selector 通常源于 HTML 元素 ID 以数字开头，违反 CSS 选择器规范；修正 ID 命名为合法标识符（如 threedplot）即可解决。
pyscript 报错 `syntaxerror: '#3dplot' is not a valid selector` 通常源于 html 元素 id 以数字开头，违反 css 选择器规范；修正 id 命名为合法标识符（如 `threedplot`）即可解决。
在使用 PyScript 构建交互式 Python Web 应用时，一个看似微小却极易被忽视的陷阱是：HTML 元素的 id 属性值不能以数字开头。虽然浏览器可能允许渲染含 id="3dplot" 的 <div>，但当 PyScript（底层通过 JavaScript 的 document.querySelector()）尝试定位该元素时，会严格校验 CSS 选择器语法——而 #3dplot 是非法的：CSS 标准规定，以数字开头的 ID 不能直接用于 # 选择器，除非进行转义（如 #\33 dplot），但 PyScript 并不自动处理此类转义。
你的代码中存在多个以数字开头的 ID：
<input type="text" id="3dinput">10,20,30</input> <button id="3dplotbutton" py-click="show_plt()" class="py-button">Set camera</button> <div id="3dplot"></div>
其中 id="3dinput"、id="3dplotbutton" 和 id="3dplot" 均以 3 开头，导致 display(fig, target="3dplot") 内部调用 document.querySelector('#3dplot') 时抛出 JsException: SyntaxError。
✅ 正确做法是将所有相关 ID 改为符合 CSS identifier 规则 的命名：
- 必须以字母（a–z, A–Z）、下划线 _ 或 Unicode 字母开头；
- 后续可跟字母、数字、_、- 或 Unicode 字符。
例如，推荐修改如下：
<input type="text" id="threedinput" value="10,20,30"> <button id="threedplotbutton" py-click="show_plt()" class="py-button">Set camera</button> <div id="threedplot"></div>
同时，更新 Python 函数中的 target 参数：
# acc_main.py
def show_plt():
display(fig, target="threedplot", append=False) # ← ID 名称需完全一致⚠️ 注意事项：
- id 值区分大小写，且必须全局唯一；
- Quarto 渲染本身不会改写 id，因此问题与 Quarto 无关（正如你检查渲染后 HTML 所确认的）；
- 不要依赖 js.document.getElementById("3dplot") 作为替代方案——虽然该 API 可能“偶然”成功（因 getElementById 对非法 ID 宽松），但 display() 等 PyScript 内置函数强制使用 CSS 选择器，必须合规；
- 若需保留语义化前缀（如 3D），建议使用驼峰（threeDPlot）、下划线（three_d_plot）或连字符（three-d-plot）形式。
? 验证技巧：在浏览器开发者工具控制台中执行以下命令，快速检验 ID 是否可被正确选取：
// ✅ 合法 ID（应返回对应元素）
document.querySelector('#threedplot')
// ❌ 非法 ID（将报错）
document.querySelector('#3dplot')总结：PyScript 的 display(..., target=...) 机制深度依赖标准 CSS 选择器解析，ID 命名必须遵循 Web 标准。一次规范命名，即可避免此类静默失败。养成检查 ID 合法性的习惯，是构建稳定 PyScript 应用的重要基础。
