如何利用HTML Slot实现高度可配置的容器组件-html教程-PHP中文网

slot 本身不提供配置能力，仅负责内容分发；高度可配置依赖命名插槽、直系子节点约束与 shadow dom 封装三者组合，缺一不可。

如何利用html slot实现高度可配置的容器组件

Slot 本身不提供“配置能力”，它只负责内容分发；真正实现高度可配置，靠的是命名插槽 + 直系子节点约束 + Shadow DOM 封装这三者的组合。没挂 shadowRoot，slot 就是废标签。

这不是语法错误，而是环境缺失。浏览器对 slot 的处理非常“冷酷”：没 Shadow DOM，就直接忽略；有 Shadow DOM 但内容不是直系子节点，就静默丢弃。

必须在自定义元素的 constructor 或 connectedCallback 中调用 this.attachShadow({ mode: 'open' })，且只能调用一次
<my-card><div><h2 slot="title">标题</h2></div></my-card> → <h2></h2> 不会被分发，因为它不是 <my-card></my-card> 的直系子节点
父级写了 <h2 slot="Title"></h2>，但组件内是 <slot name="title"></slot> → 大小写不匹配，内容消失，不报错
没声明任何 <slot></slot> 标签？所有传入内容彻底丢弃，连 fallback 都不会显示

具名插槽不是越多越好，关键在语义清晰、边界明确。一个容器组件通常只需 3–4 个命名插槽，再多反而增加使用者认知负担。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

header / footer / main 是最安全的命名，符合 HTML5 语义，也便于 CSS ::part() 或自定义属性透传
避免用 left-area、right-panel 这类布局导向命名——布局应由使用者通过 CSS 控制，组件只暴露语义区域
多个同名 <slot name="item"></slot>？只有第一个生效，其余空着；想支持列表项，应该用单个 <slot name="items"></slot> 让使用者传整个 <ul></ul>
默认插槽（无 name）只能有一个，且应作为兜底内容区，比如 <slot>暂无内容</slot>

slotchange 事件不是“内容一变就触发”，它只在浏览器完成一次完整的内容分发后触发，且不冒泡。想拿到真实节点，必须绑定到具体 <slot></slot> 元素上。

不要在 connectedCallback 里立刻查 slot.assignedNodes() —— 此时返回空数组是常态
正确写法：const titleSlot = this.shadowRoot.querySelector('slot[name="header"]'); titleSlot.addEventListener('slotchange', () => { const nodes = titleSlot.assignedNodes({ flatten: true }); /* 处理 nodes */ });
{ flatten: true } 必须加，否则嵌套在 <template></template> 或 <slot></slot> fallback 里的节点不会被展开
Firefox 63 以下不支持 slotchange，需降级用 MutationObserver 监听 slot 的 childList