Give each template one root element

How to do it

One root gives the component one place for its class, its custom properties and its container query. Spacing between components belongs to the layout that holds them, not to a wrapper added by each caller. Controls such as buttons come from the shared library in Build each control once. Name the root class as Use one naming pattern for every class describes.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

JavaScript example

import { parseFragment } from 'parse5';
const roots = parseFragment(priceTag({ name: 'Rye loaf', price: '4.50' })).childNodes.filter(node => node.tagName);
assert.equal(roots.length, 1);
assert.match(roots[0].attrs.find(a => a.name === 'class').value, /^price-tag\b/);

Python example

from html.parser import HTMLParser

class Roots(HTMLParser):
    def __init__(self):
        super().__init__(); self.depth = 0; self.roots = []
    def handle_starttag(self, tag, attrs):
        if self.depth == 0: self.roots.append(dict(attrs).get("class", ""))
        self.depth += 1
    def handle_endtag(self, tag):
        self.depth -= 1

parser = Roots(); parser.feed(price_tag("Rye loaf", "4.50"))
assert len(parser.roots) == 1 and parser.roots[0].startswith("price-tag")

How to check

A unit test parses each template's output. It finds exactly 1 top-level element, and that element's class list starts with the module prefix.

Related rules

• Build each control once in App interface
• Use one naming pattern for every class in HTML and CSS