Shoelace必须显式引入才能使用，推荐通过ESM方式加载CDN脚本并单独引入light.css主题；未注册时<sl-button>等标签不会升级，导致无样式无交互，需确保加载顺序、CSS引入及等待sl-load事件或customElements.whenDefined。
Shoelace 不是 HTML 原生组件，它是一套基于标准 Web Components 的第三方 UI 库，必须显式引入才能用——不引入 <script> 或加载 CDN 就直接写 <sl-button>，页面只会显示空白或解析为未知标签。
如何正确加载 Shoelace 并启用自定义元素
Shoelace 依赖 ES modules 和自定义元素注册机制，现代浏览器（Chrome 67+、Firefox 63+、Safari 16.4+、Edge 79+）原生支持，但加载方式直接影响组件是否渲染：
- 推荐用 ESM 方式通过 CDN 加载：在
<head>中加入<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2/dist/chunks/shoelace.js"></script>（注意type="module"不可省略） - 若用构建工具（Vite、Webpack），需确保
@shoelace-style/shoelace已安装，并在入口 JS 中显式导入：import '@shoelace-style/shoelace/dist/themes/light.css'; import '@shoelace-style/shoelace/dist/shoelace.js'; - 不支持直接通过
<script src="...>（非 module）加载，否则customElements.define()不会执行，所有<sl-xxx>标签保持未升级状态
为什么写了 <sl-button> 却没样式也没交互
常见原因不是语法错，而是组件未“升级”（upgrade）——即浏览器还没把它识别为自定义元素。典型表现：<sl-button>Click</sl-button> 在 DOM 中可见，但无样式、无点击反馈、getComputedStyle 查不到 display: inline-flex 等值：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查控制台是否有
Failed to resolve module specifier或customElements.define called twice报错 - 确认 CSS 主题已加载：Shoelace 不打包样式进 JS，
light.css或dark.css必须单独引入（<link rel="stylesheet" href=".../light.css">） - 避免在
<body>内联脚本中立即操作document.querySelector('sl-button')—— 组件异步注册，应等sl-load事件或用customElements.whenDefined('sl-button')
sl-input、sl-select 等表单控件的 value 和事件怎么取
Shoelace 表单组件遵循原生表单语义，但部分行为与原生略有差异，容易误用：
立即学习“前端免费学习笔记（深入）”；
-
sl-input的value是字符串，实时同步；监听sl-change（用户提交）或sl-input（输入中）事件，而非input（原生事件名被屏蔽） -
sl-select默认多选需加multiple属性，其value是字符串数组（即使单选也返回['xxx']），要取单值得用value[0]或设hoist+value属性绑定 -
sl-checkbox和sl-switch的checked是布尔属性，但事件是sl-change，且触发时event.target.checked才是最新状态 - 所有组件都支持
form关联和name属性，可参与原生FormData提交，无需额外封装
Shoelace 的核心复杂点在于“加载时机”和“样式分离”——它不搞运行时注入 CSS，也不自动 polyfill，这意味着你得自己管好 script 加载顺序、CSS 引入路径、以及组件注册完成前的 DOM 访问逻辑。漏掉任一环，组件就只是个空壳标签。
