1 · 文字骨头：skz-text 与 skz-text-mode
同一份内容，每个元素都标了 skz-text；四个根各自写不同的 skz-text-mode，文字统一用 <span skz-text> 包在块元素内层；round（默认，行内元素每行圆角，直接标在块元素上则是整块圆角矩形，见右下角对照；浏览器不支持 box-decoration-break 时自动退回 clip）、clip、underline、leaf（顶部「文字模式」不影响本节；显式 skz-text 要档位 ≥「第 1 档」才出条）。看粗细、垂直位置、不同字号、混合文字、嵌套、最后一行。已知局限：雅黑 / Segoe UI / system-ui 下 round 的条比 clip 高约 0.1~0.16em；line-height 1.2 时多行条可能相互叠出凹口。
round（默认）
clip
underline
leaf（叶子背景）
round 下：标在块元素 vs 内包 span
① <p skz-text> 直接标在块元素上：整块圆角矩形，看不出文字长短。
这是一段比较长的正文，在窄容器里折成好几行，整块的条完全看不出最后一行有多长。
② <p><span skz-text> 内包 span（推荐）：每行一条，最后一行较短。
这是一段比较长的正文，在窄容器里折成好几行，每行一条，最后一行明显比前面短。
2 · 卡片：skz-text 容器 + skz-bone
头像（Bone.image 透明图）、星标图标、按钮写 skz-bone；昵称、时间、简介的文字各包一层 skz-text。卡片自己的边框背景保留。
3 · 媒体：skz-bone
img（透明 mock 图 / 真实图片）、内联 svg、video、canvas、input、button 都写 skz-bone。观察真实图片能否被藏起来；小标题写 skz-ignore，保持可读。
img · Bone.image(160,100)
img · 真实图片（没 mock）
svg
video
canvas
input / button
4 · 标记：skz-text / skz-bone / skz-leaf / skz-ignore
skz-text：写在行内元素（span）上，整个子树的文字按行出条；skz-bone：整块当骨头；skz-leaf：整块并藏起子树；skz-ignore：原样显示、可交互。
skz-ignore（Logo 保持原样）
这段会变骨头：欢迎回来，今天也要加油。
skz-leaf（整块合并）
3 件商品 · ¥ 128.00
预计明天送达
skz-bone（装饰 div 当骨头）
上面是渐变装饰条，没有标记时不会被识别。
skz-text（行内元素上标一次，覆盖混合内容）
价格：¥ 5.00 起，包邮。外层 斜体中的 加粗 内容 收尾，换行时最后一行会变短。
5 · Web Component（Shadow DOM）
demo-card 内部有 shadow DOM。给宿主写 skz-host 标记：宿主 visibility:hidden + ::before 铺骨头，样式是 CSS 里静态写好的。
5.4 · shimmer 光带行程对照（even 模式）
顶部效果选 shimmer、光带模式选 even 时看：两排都是宽 420px 的根里放几个小骨头，只差光带一轮的行程参考宽度（100cqw）。第一排没有容器，100cqw 等于视口宽，屏越宽空等越久；第二排根上写了 container-type: inline-size，按根自己的宽度走，几乎不空等。
没有容器：100cqw 等于视口宽（与以前的 100vw 相同）
根上 container-type: inline-size：按根的内容宽度（约 390px）走
5.5 · <skz-box> 自定义元素（skeletonizer/element）
不调用 enable()：宿主 <skz-box> 只认自己的 loading / effect / text / engine 等属性，skz 落在它的第一个元素子节点上。顶部开关通过 el.loading 与属性同步过来；需要先 import "skeletonizer"（或 lite）再 defineSkzBox()。
<skz-box> 包着的卡片
由 defineSkzBox() 注册宿主只负责开关，骨架状态作用在里面这张卡片上。
6/7 · 动画与 Bone mock
顶部切换 fade（默认，根级 opacity，几乎零成本）/ solid / pulse / shimmer。下面的文字全部由 Bone 生成（确定性、不用 Math.random），写 skz-text 出条；小标题写 skz-ignore。
8 · skz-auto 写在根上的边界场景
根自身写了 skz-auto，档位切换在这里才有效果：切到「无推导」时这里什么都不显示（骨头全靠推导规则）。根的直接子元素依次是：普通块 / 绝对定位悬浮角标 / display:contents 包装 / canvas / 裸文字。
display:contents 包装里的段落一
段落二
9 · fit：不撑出滚动条
同一个 100 项列表骨架放进三种容器——固定高度滚动容器（300px overflow:auto）、无确定高度的普通 div（靠页面/视口）、应用壳布局（固定高度的 flex 列，标题下面 flex:1 的区域负责滚动，常见于后台/App 页面）；每个带 fit 开关对比。每个列表项里用 <span skz-text> 包文字。开启 fit 后骨架不会把容器撑出滚动条，多余项会被 display:none。本区在页面靠后（首屏以下），页面本来就能滚，所以「普通 div」放宽为一屏高；容器内的两个贴着容器底边。
固定高度 (300px overflow:auto)
普通 div (靠页面/视口)
应用壳：标题 + flex:1 滚动区
10 · skz-auto：第三方组件
左：无法加标记的第三方组件，外层写 skz-auto，按标签清单推导（档位切换在这里有效）。已知局限：清单外的裸文字（div / code / 自定义元素里直接写的文字）在 round / clip 下不可见，空 div 做的头像 / 色块不识别，要自己写 skz-text / skz-bone 补上。中、右：忽略区放在 skz-text 元素里，它的文字会压在骨头条上（不再关掉祖先的下划线）；想要干净的忽略区，拆成兄弟元素。
第三方组件（外层 skz-auto）
段落文字会出骨头，行内 span 也会。
code 里的裸文字：不可见
忽略区在 skz-text 内
价格 实时 ¥ 5.00 起，包邮
整行都有骨头条，实时那段的真实文字压在条上。
推荐：拆成兄弟元素
价格 实时 ¥ 5.00 起，包邮
骨头条和忽略区互不重叠。