Templating in HTML

#1

Post by clairity » Tue, Oct 04, 2022, 8:06 PM UTC

Templating in HTML
kittygiraudel.com

Re: Templating in HTML

#2

Post by icedchai » Tue, Oct 04, 2022, 8:41 PM UTC

In the jquery days, I would often do this sort of thing with hidden divs.

Re: Templating in HTML

#3

Post by clairity » Tue, Oct 04, 2022, 9:37 PM UTC

icedchai wrote: post #2

In the jquery days, I would often do this sort of thing with hidden divs.

i remember doing stuff like that too, but now it's official! ha.

it's exciting to see web standards (finally) taking direction from web developers rather than corporate interests, despite chrome being so prominent. as a random aside, i'm especially hoping forms get more love, like the common behaviors (datetime entry, combobox, validation/feedback, etc.) that every developer has to wrangle with over and over. and it's great to see things like the element becoming almost fully usable without js (it still needs to be triggered via js, but can be closed with a method='dialog' form button).

Re: Templating in HTML

#4

Post by TedDoesntTalk » Tue, Oct 04, 2022, 9:49 PM UTC

Been doing today for years with a custom tags. name it anything you want. works

Re: Templating in HTML

#5

Post by labrador » Tue, Oct 04, 2022, 9:52 PM UTC

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute.

I didn't expect the paragraph to end that way. I would write it:

Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, you can use "display:none" to hide the HTML structure, then copy node to make and show a copy, for example a dialog box

Anyway, that's how I've been doing it. If has some advantages, I'll start using it

Re: Templating in HTML

#6

Post by Gualdrapo » Tue, Oct 04, 2022, 9:53 PM UTC

I'm redoing from scratch my portfolio using plain JavaScript and s for most stuff, pulling everything from a JSON as a pseudo database. I think for this kind of uses is great, but you can really wish it has some extra features like the ability to define repeating block sections so you didn't need to declare nested s for what would be a single block code.

Re: Templating in HTML

#7

Post by runarberg » Tue, Oct 04, 2022, 9:58 PM UTC

labrador wrote: post #5

> Let’s start with the fact that do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, it might be very cumbersome to do so manually with document.createElement and element.setAttribute. I didn't expect the paragraph to end that way. I would write it: Let’s start with the fact…

> for example a dialog box

The element is now supported by all modern browser. I suggest you use it. It has a lot of niceties over implementing one your self, including capturing the focus, correct announcing to assistive technologies, styling the ::backdrop element, etc.

Re: Templating in HTML

#8

Post by asadlionpk » Tue, Oct 04, 2022, 10:05 PM UTC

I wrote apps this way before React came along. I hated inserting/updating values by hand with no binding.

Re: Templating in HTML

#9

Post by verisimilidude » Tue, Oct 04, 2022, 10:07 PM UTC

The tag really shines when used alongside and the Shadow DOM.

But I really wish there were an HTML-native way to load from separate files, the same way we do with CSS and JS. Not a show-stopper, but it’d be very nice to have.

Re: Templating in HTML

#10

Post by runarberg » Tue, Oct 04, 2022, 10:08 PM UTC

clairity wrote: post #3

icedchai wrote: post #2

In the jquery days, I would often do this sort of thing with hidden divs.

i remember doing stuff like that too, but now it's official! ha. it's exciting to see web standards (finally) taking direction from web developers rather than corporate interests, despite chrome being so prominent. as a random aside, i'm especially hoping forms get more love, like the common behaviors (datetime entry, combobox, validation/feedback, etc.) that every developer has to wrangle with over and over. and it'…

Datetime is mostly there. I think firefox and safari have yet to implement and . As for combobox, and is supported everywhere. However I would like to see the CSSWG focus on better standards for styling these, it is possible now using a lot of vendor-specific hacks, but is really annoying.

I’m gonna go ahead though and declare frontend validation (as good as) finished. the constraint validation API is amazing to work with (if you are not afraid of intercepting the submit event using JavaScript).