attachShadow()仅支持容器类元素（如div、span），替换元素（img、input等）和未注册的自定义元素均不支持；Shadow DOM样式隔离，仅:host和::slotted(*)可跨边界影响布局；查询与事件需通过shadowRoot操作。

attachShadow() 必须在支持的宿主元素上调用

不是所有 HTML 元素都能挂载 Shadow DOM。调用 attachShadow() 时抛出 Failed to execute 'attachShadow' on 'Element': This element does not support shadow roots，基本就是选错了宿主。

• div、span、article 等容器类元素支持；img、input、button、select 等替换元素（replaced elements）**不支持**
• 自定义元素（如 ）必须先用 customElements.define() 注册，否则调用也会失败
• 元素必须已插入 DOM —— 在 document.createElement('div') 后立刻调用 attachShadow() 会报错，得先 document.body.appendChild(el) 或等 connectedCallback 触发

:host 和 ::slotted 是布局控制的唯二入口

Shadow DOM 内部样式默认完全隔离，外部 CSS 进不去，内部样式也出不来。真正能影响布局的，只有两个伪类能“跨边界”起作用：

• :host 控制宿主元素自身显示方式：:host { display: block; width: 100%; } 才能让 像块级元素一样撑开
• ::slotted(*) 只能重置被 投影进来的节点的可继承属性（color、font-family、line-height），但不能设 margin 或 display —— 那些得由使用者在 Light DOM 里自己写
• 别写 ::slotted(*) 或 :host ::slotted(*)，部分浏览器行为不一致，且破坏封装意图

shadowRoot.querySelector() 是唯一能查到内部节点的方法

你不能用 document.querySelector('button') 或 el.children 拿到 Shadow DOM 里的结构 —— 它们根本看不见。查不到不是 bug，是设计如此。

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• 正确路径：先拿到 el.shadowRoot（前提是 mode: 'open'），再调 shadowRoot.querySelector('button')
• 如果宿主是 ，想查它内部的 ，就得写 formEl.shadowRoot.querySelector('input[type="text"]')
• 监听内部按钮点击？事件监听器必须挂载在 shadowRoot 上，或利用冒泡 + event.composedPath() 获取路径

Flex/Grid 布局要写在 shadow 内部，不能靠外部容器驱动

把 display: flex 写在宿主元素上（比如 ）对 Shadow DOM 内部子项完全无效。布局必须在影子树内部定义。

• 想让内部几个 并排？得在 shadowRoot 里放一个
• 用 预定义结构时，记得用 shadowRoot.appendChild(template.content.cloneNode(true))，直接 innerHTML 会丢掉 的 CSSOM 能力
• 动态改样式？别拼字符串：shadowRoot.innerHTML = '' 会让 当普通 HTML 解析，后续 sheet.cssRules 读不到规则

最易忽略的点：:host 默认是 inline-level，很多组件一上来就宽高失效，是因为没显式设 :host { display: block } 或 inline-flex；还有人把 当 div 用，结果内容全丢了 —— 它只是出口，不是容器。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！