Light DOM — Slot Forwarding

同学们，咱们今天讲一个挺有意思的特性，叫做“插槽转发”。听起来有点绕，别担心，我拆开一说你就明白了。 我们先回忆一下，LWC里的插槽（slot）是用来挖坑的——父组件可以往组件预留的坑里塞内容。那如果你有这样一个结构：最外层的父组件用了一个中间组件，中间组件内部又包了一个真正想要展示内容的子组件。这时候，父组件塞进来的内容，怎么穿过中间这一层，最终到达里面的子组件呢？ 这就是插槽转发要解决的问题。就像快递转运，包裹要从A市经B市转运到C市，B市这个中转站得把包裹原封不动地传下去。 在早期的版本，也就是API 60.0及以前，我们想做到这一点，得在中间组件里套一个普通的`div`，让它作为一个中转包裹的“包装箱”。写法上稍微有点啰嗦，但能用。 好消息是，从API v61.0开始，LWC把这个过程大大简化了。现在你根本不需要那个多余的`div`，直接在中间组件的`slot`元素上加一个`slot`属性就可以了。听着有点像同义反复？其实就是说：这个`slot`元素，它自己既是接收内容的“坑”（通过`name`属性），又是把内容继续转发出去的通道（通过`slot`属性）。干净利落。 两种写法效果完全一样：最外层父组件的内容，先流进中间组件（比如叫c-outer）命名的插槽，然后中间组件直接转发给里面真正的目标组件（比如c-inner），内容丝滑地到达最终展示的地方。 之所以保留老方法，主要是为了向后兼容。如果你维护的是老代码，`div`包装的方式仍然能用，不用担心升级就崩掉。 这种模式在我们构建组件库的时候特别重要。很多时候中间组件就是个壳，用来封装一些逻辑或样式，但真正的展示要交给内层组件去完成。插槽转发就让这个“壳”能够透明地传递内容，既保持了封装，又不牺牲灵活性。 好了，小结一下：插槽转发让内容像接力棒一样，稳稳地从外传到内，而新版的做法就是给`slot`元素直接加`slot`属性，省掉了无用的包装。简单吧？有什么问题随时提出来。