Inspect the working example
The template contains a draft paragraph. A separate ordinary paragraph is visible. The template is a reusable fragment container, but this native example does not clone it or insert its contents into the page.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Visible document | Inspect the body outside template.content | One ordinary paragraph is visible |
| Document query | document.querySelector(".sample") | null; template content is outside this query scope |
| Template query | line.content.querySelector(".sample") | Finds the draft paragraph in a DocumentFragment |
Follow the browser mechanism
template.content is a DocumentFragment holding the template’s child markup. Its stored paragraph is not an ordinary child in the displayed document query scope. A later application may clone the fragment and insert it, but no such script or action exists in this fixed example.
CSS-hidden markup remains in the document query scope
This ordinary paragraph is hidden with display:none. It does not become template content, so a document query still finds it.
<style>.sample{display:none}</style><p class="sample">Draft fragment</p><p id="visible">Visible workshop note.</p>Both examples hide the draft visually. Only the CSS-hidden paragraph is returned by document.querySelector(".sample"); the template version requires a content query.
Try the repair
A document query returns null for .sample. Does that prove the template contains no draft paragraph?
Show the worked answer
No. Query line.content separately. In this example that fragment contains one p.sample even though the document query returns null.
- Compare document and template.content queries on the same fixed source.
- Do not claim that cloning or insertion has happened; this fixture has no script.