默认插槽必须唯一且无name属性，仅允许一个或，多写会导致后续内容静默丢弃；需监听slotchange事件并调用assignednodes({flatten:true})获取全部投射节点。
默认插槽必须是无name属性的<slot></slot>，且只能有一个
浏览器只认严格符合规范的默认插槽：不带name属性、闭合或自闭合均可（<slot></slot> 或 <slot></slot>），但整个 Shadow DOM 中**仅允许存在一个**。多写一个就会导致后续内容被静默丢弃——不是报错，而是直接跳过渲染。
常见误操作包括：
- 写了两个
<slot></slot>，以为能收两批内容，结果只有第一个生效 - 混用
<slot name=""></slot>，这算具名插槽（空字符串也是字符串），不会匹配无slot属性的节点 - 在模板里用
<slot>fallback</slot>，但外部传入了未匹配的内容，fallback 文案仍会显示——这是合法 fallback 行为，不是 bug
assignedNodes({ flatten: true })才能拿到默认插槽的实际内容
刚挂载完 Shadow DOM 就调slot.assignedNodes()，大概率返回空数组。因为 Light DOM 内容分发有延迟，需等slotchange事件触发后才稳定。
更关键的是：assignedNodes()默认不展开嵌套结构。比如默认插槽里传入了一个<div><p>文本</p></div>，不加{ flatten: true }只会返回那个<div>节点，内部<code><p></p>不在列表里。
正确做法：
- 监听
slot元素自身的slotchange事件（不能监听shadowRoot） - 回调里调
slot.assignedNodes({ flatten: true }) - 若需响应式更新，记得在
disconnectedCallback中移除监听
外部没写slot属性的内容，只进第一个无name的<slot></slot>
这是最常被忽略的顺序约束：哪怕你写了三个<slot></slot>，外部传入<p>A</p>
<p>B</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>C</p>，也只会把<p>A</p>塞进第一个插槽，其余两个<p></p>直接丢弃——不进第二个、第三个，默认插槽不具备“广播”能力。
想让多段内容都进 Shadow DOM？必须显式指定：
- 要么全部加
slot属性，配多个具名插槽（如slot="item"） - 要么用 JavaScript 遍历
this.childNodes，手动cloneNode(true)后注入 - 或者用
display: contents配合伪元素模拟“视觉复用”，但 DOM 结构上仍是单次分发
::slotted(*)对默认插槽无效，得靠透传 class 或 CSS 变量
::slotted()伪类只匹配被投射进来的**直系子元素**，而且不支持通配符或深层选择器。写::slotted(*)或::slotted(p em)全无效。
想统一控制默认插槽里所有段落的颜色？别指望::slotted(p)——它只生效于外部直接写的<p slot="xxx"></p>，而默认插槽收的是无slot属性的<p></p>，不属于::slotted()作用域。
可行方案：
- 让使用者自己加
class="body-text"，然后在 Shadow DOM 里写.body-text { color: var(--text-color); } - 组件内部用
slot.assignedNodes({ flatten: true })遍历所有节点，给它们统一加 class - 用
:host定义 CSS 变量，再由 Light DOM 节点主动消费（如color: var(--text-color)）
<slot></slot>、早一步读取节点，都会让内容消失得无声无息。
