Reusable pieces, drawings, and the parts the web has moved on from
A stamp you copy instead of repeating yourself, a tag you invent, drawings that everyone can still understand, editable and draggable content, and an honest look at the old corners of HTML.
By the end you can
- Keep a repeated shape in one place and stamp it out
- Build your own tag with slots for other people's content
- Put drawings on a page without losing anyone
- Recognise the old parts of HTML and know what replaced them
Easier if you did first
step 1 of 4
A stamp, a slot and a tag you invent
Imagine a rubber stamp. The shape is cut once. You press it onto the page as many times as you like, and fill in the blanks each time.
<template> is that stamp. The browser reads what is inside it, but draws nothing. No pictures load. No code runs. It sits there, ready, until something copies it.
This matters even if you never build a component. When a list of ten orders arrives, you want their shape written once in your HTML, not glued together out of text inside your JavaScript.
Next, a tag you invent yourself. <order-card> is not in HTML, but you can create it. The only rule is that the name must contain a hyphen, which is what guarantees your name will never clash with a future HTML tag.
Such a tag can be given a private inside, called a shadow root. Styles inside it cannot leak out, and styles outside cannot leak in. Think of a sealed box with a window.
<slot> is the window. You leave a hole in the private shape, and whatever the page puts in goes there. So the component owns the shape, and the page owns the words, written as plain HTML that anyone can read.
The JavaScript that creates the tag is already written for you. Your job is the template, the slots, and the content that fills them.
<template id="order-card">
<article>
<h3><slot name="title">Untitled</slot></h3>
<p>Total: <slot name="total"></slot></p>
</article>
</template>
<order-card>
<span slot="title">Order ORD-4821</span>
<span slot="total">GHS 600</span>
</order-card>What these words mean
- template
- Markup the browser reads but does not draw. A stamp, waiting to be copied.
- content
- What is inside a template. Copy it before using it.
- custom element
- A tag you create. The name must contain a hyphen.
- shadow root
- A private inside for an element. Styles do not leak in or out.
- slot
- A hole in that private shape, filled by the page's own content.
- slot attribute
- On an element in the page: which named hole it goes into.
Easy to get wrong
Putting the template's contents straight into the page
Copy them first, with cloneNode(true)
Using the contents directly moves them out of the template, so the stamp is empty from the second card onwards. Always copy.
A tag called <ordercard>
<order-card>
Without a hyphen the name is not allowed and the browser refuses to create it. The hyphen is what keeps your names apart from HTML's own, forever.
What we check
- There is a template to stamp out
- The template has two named slots
- The page fills both slots
- The custom element built its shadow root
- The card's shape came from the template