How are those non-standard HTML tags supposed to work?

[moritzreiter]

Can someone help me to make sense of this?

contact-app/templates/layout.html

Lines 16 to 17 in 6b9449c

	<all-caps>contacts.app</all-caps>
	<sub-title>A Demo Contacts Application</sub-title>

I cannot figure out what this is and how it's supposed to work. It's not standard HTML tags, so what is it?

It also doesn't seem to do quite what it is implying to do. Like, the content of the <all-caps> tag is not rendered in all caps when I try it.

[banillie]

@moritzreiter See issue #10. Thanks to @mousedownmike who points out that you need to update the missing.css to the latest version. That sorted most the styling for me, although all-caps isn't working for some reason still. Plus the a tag colouring/styling.

[moritzreiter]

@banillie Yes, I updated the import of the missing.css library and that does fix most styling issues.

But I think those <all-caps> and <sub-title> tags are something else. They aren't standardized HTML tags. They might be custom elements? But the behavior of those custom elements would have to be implemented somewhere. I guess that implementation is missing from the repo.

[toraritte]

This is probably belaboring the point, but leaving this here about web components for future self:

• There is an aside titled "Web Components / Custom Elements" in the Using Off-the-Shelf Components section that cites the same MDN article (i.e., MDN Web APIs - Using custom elements) among others.

• See Web Components on the HTMX 2.0 (alpha) page