Det går att skriva validerande HTML med Web components
2026-04-30 på Anders Ytterströms webblogg
I takt med att Progressive web components (även omnämnd som HTML web components) börjar etablera sig, så ställde jag mig själv en fråga som jag funderat på av och till.
Om jag som utvecklare börjar lägga till egna HTML-element, innebär inte det att mina HTML-dokument slutar validera?
Validerande HTML har varit ett krav i många offentliga upphandlingar och styrdokument. Jag själv försöker alltid att uppnå det i mina åtaganden och leveranser.
Korta svaret på min fundering är nej, men med förbehåll.
- Använd bindestreck i elementets namn för att tala om för HTML-validatorer att elementet är ett custom element, och därmed undantas från valideringen.
- Inte ett skallkrav, men använd
<!DOCTYPE html. Alla andra dokumenttyper är markerade som obsolete.
Bindestreck är det väsentliga. För att se den fulla listan över kraven på namnstättning av egna Custom elements, läs avsnittet Core Concepts i WHATWG HTML Living standard.
Exempel
Följande är alltså inkorrekt HTML:
<!-- Exempel 1: lista -->
<sortable>
<ul>
<li>Smör</li>
<li>Ost</li>
<li>Bröd</li>
</ul>
</sortable>
<!-- Exempel 2: formulär -->
<formenhancer>
<form action="do">
<label>
Namn
<input name="name">
</label>
</form>
</formenhancer>
Följande är korrekt, validerande HTML:
<!-- Exempel 1: lista -->
<sortable-list>
<ul>
<li>Smör</li>
<li>Ost</li>
<li>Bröd</li>
</ul>
</sortable-list>
<!-- Exempel 2: Formulär -->
<form-enhancer>
<form action="do">
<label>
Namn
<input name="name">
</label>
</form>
</form-enhancer>