HTML中使用template标签与slot实现组件化内容分发方法-html教程-PHP中文网

template 标签不渲染，需用 javascript 克隆 content 插入；slot 仅在自定义元素的 shadow dom 中生效，依赖 attachshadow 和元素升级，二者组合须在 connectedcallback 或构造时手动处理。

html中使用template标签与slot实现组件化内容分发方法

template 标签本身不渲染，必须配合 JavaScript 手动克隆使用

template 是 HTML 原生的“离线模板容器”，浏览器解析时跳过其内容，不会创建 DOM 节点，也不会触发资源加载（比如 <img> 不会请求图片）。这意味着你不能直接靠写个 <template><p>hello</p></template> 就让内容显示出来。

常见错误是以为给 template 加 id 或 class 后用 CSS 选中就能生效——不行，它不在主文档流里。真正要用，得用 JS 拿到它的 content 属性，再 cloneNode(true) 插入目标位置：

const tmpl = document.querySelector('#my-tmpl');
const instance = document.importNode(tmpl.content, true);
document.body.appendChild(instance);

必须用 importNode 或 cloneNode(true)，直接 appendChild(tmpl) 无效
content 是一个 DocumentFragment，不是普通元素，不能直接调用 querySelector 等方法（需先挂载或遍历）
如果模板里有 <script></script>，默认不会执行；需要手动创建并运行（且注意 CSP 限制）

slot 是 Web Components 的分发机制，只在 custom element 内部有效

slot 不是独立功能，它依赖于 Shadow DOM 和自定义元素生命周期。你在普通 HTML 里写 <div><slot name="header"></slot></div> 完全没用——浏览器不认识这个语义，也不会做任何内容分发。

只有当它出现在自定义元素的 shadow root 中，且该元素通过 attachShadow 创建了 Shadow DOM，slot 才开始工作：

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div class="card">
        <header><slot name="header">Default header</slot></header><main><slot>Default content</slot></main>
</div>
    `;
  }
}
customElements.define('my-card', MyCard);

外部使用时，用具名属性匹配：<my-card><h2 slot="header">Title</h2> <p>Body</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></my-card>
不带 slot 属性的子节点，会落入默认 <slot></slot>（即无 name 的那个）
如果 shadow root 是 {mode: 'closed'}，外部无法通过 shadowRoot 访问，但 slot 分发仍正常

template + slot 组合只在 custom element 构造阶段有意义

你不能把 template 当作 slot 的“内容源”。常见误解是这样写：

<template id="card-tmpl"><my-card><h2 slot="header">From template</h2>
  </my-card></template>

这不会自动激活 slot 分发。因为 template 里的 <my-card></my-card> 只是字符串片段，还没被升级为自定义元素，更没创建 shadow root。

正确做法：在 custom element 的 connectedCallback 里，用 JS 把 template.content 克隆后 append 到 shadow root 或 light DOM
或者，在定义元素时，把 template 内容作为初始 shadow DOM：this.shadowRoot.appendChild(document.importNode(tmpl.content, true));
slot 分发发生在元素插入文档后、渲染前的“分发阶段”，所以必须确保元素已 upgrade、shadow root 已存在、子节点已挂载