R1.11.1content slot设计

插槽把内容的决定权交还给使用方

别名: 具名插槽 · 内容投影 · named slot · children slot

概念解释

插槽(content slot)是组件在自身结构里留出的空洞:外壳、间距、溢出和焦点环归组件,空洞里放什么归使用方。使用方把标题、操作、媒体或任意子树直接放进这个位置,而不是把内容先压成字符串或布尔再交给组件去猜。决定权交还,指的是「这段界面说什么」从组件接口里拿出来,回到调用点的标记树上。

它不是「再开一个叫 extra 的参数」。参数仍由组件作者解释;插槽里的节点由使用方解释。卡片的标题槽可以是一行字,也可以是带徽章的标题组,组件不必预知这两种形状。

机制

组件一旦把内容收进自己的属性表,作者就被迫枚举内容形状:标题多长、右侧有没有按钮、空态画什么。枚举赶不上产品变化,于是属性膨胀,每种新产品语义都变成开关。插槽把形状从接口中删除:组件只声明空洞的几何与行为约束(最大高度、是否可滚动、是否参与焦点顺序),内容作为子树在运行时填入。

这一分工能成立,是因为布局约束与内容语义本来就不是同一层决策。外壳知道自己是 48 像素高的顶栏,不知道顶栏里今天是搜索框还是分段控件。把后者写成属性,等于强迫外壳作者兼任页面作者。把前者交给使用方,又会让每处调用各自发明一套间距。插槽切断这两件事:约束留在组件,语义留在调用点。

边界

内容形状完全封闭、不允许自定义时,插槽是负担——开关和标签页的「选中」不该变成让使用方塞任意节点的空洞,那会拆掉组件自己的状态机。无障碍名称、角色必须由组件合成的控件,空洞只能开在名称不会被覆盖的位置。服务端渲染且内容来自结构化字段、没有标记树可插的场景,插槽没有附着点。外观档位怎么选,是另一条问题,不靠多开几个内容空洞来解决。

怎么落地

  • 把「使用方每次都在改」的区域做成具名插槽(标题、动作、媒体),把「使用方从不该改」的区域收成组件内部实现。
  • 为每个插槽写下几何与行为约束:最小/最大尺寸、溢出策略、空内容时外壳是否折叠,而不是默许任意撑开。
  • 禁止用一个叫 extracontent 的杂物属性代替具名插槽;位置不清楚的内容,使用方无法判断该放哪。
  • 验证:找三处真实调用,看它们是否靠开关模拟本该放进插槽的结构。能列出的每一种开关,都对应一个应被拆成空洞的内容决定。再把插槽里换成极端长短与完全空白:外壳约束仍在、页面语义仍由调用点决定,才算交还成功。

延伸

  • 同组R1.11.2 拼装比传参更少歧义 · R1.11.3 合法的父子搭配需要显式约束 · R1.11.4 上下文传递让子组件适配所处容器
  • 相邻R1.02 组件库与变体 · R1.08 过度抽象
  • 站内检索content slot · named slot · content projection

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R1.11.1