先看這個例子
template 內有一段草稿，外面另有一段正常顯示的筆記。template 用來保留可重用片段；這個原生例子未複製或插入其內容。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 已顯示文件 | 查看 template.content 以外的 body | 有一段正常段落可見 |
| 文件查詢 | document.querySelector(".sample") | 為 null；模板內容不在這個查詢範圍 |
| 模板查詢 | line.content.querySelector(".sample") | 在 DocumentFragment 找到草稿段落 |
瀏覽器怎樣處理
template.content 是保留模板子內容的 DocumentFragment。內存段落不屬目前顯示文件的正常查詢範圍。應用程式日後可複製再插入片段，但這個固定例子沒有該程式或動作。
用 CSS 藏起來，元素仍在文件查詢範圍
反例把正常段落設為 display:none。它不會變成 template 內容，文件查詢仍找得到。
<style>.sample{display:none}</style><p class="sample">草稿片段</p><p id="visible">這段工作坊筆記已顯示。</p>兩例草稿都沒有顯示；只有 CSS 隱藏的段落會被 document.querySelector(".sample") 找到。模板例子須改查 content。
試着修正
文件查詢 .sample 得到 null，是否證明 template 沒有草稿段落？
查看參考答案
不是。另查 line.content；本例片段內有一個 p.sample，只是文件查詢沒有找到。
- 用同一份固定原始碼，比較文件和 template.content 查詢。
- 本例沒有程式，不能聲稱已複製或插入。