[HN Gopher] Templating in HTML
       ___________________________________________________________________
        
       Templating in HTML
        
       Author : clairity
       Score  : 65 points
       Date   : 2022-10-04 20:06 UTC (2 hours ago)
        
 (HTM) web link (kittygiraudel.com)
 (TXT) w3m dump (kittygiraudel.com)
        
       | TedDoesntTalk wrote:
       | Been doing today for years with a custom tags. name it anything
       | you want. <foo/> works
        
       | icedchai wrote:
       | In the jquery days, I would often do this sort of thing with
       | hidden divs.
        
         | clairity wrote:
         | 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 <modal> 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).
        
           | runarberg wrote:
           | Datetime is mostly there. I think firefox and safari have yet
           | to implement <input type=month> and <input type=week>. As for
           | combobox, <datalist id=mylist> and <input list=mylist> 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).
        
       | labrador wrote:
       | > Let's start with the fact that <template> 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 <template> 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 <template> has some
       | advantages, I'll start using it
        
         | runarberg wrote:
         | > for example a dialog box
         | 
         | The <dialog> 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.
        
           | labrador wrote:
           | Thanks for the tip. I should read the spec again so I don't
           | miss these.
        
         | Stamp01 wrote:
         | I think the main advantages are that you don't have to remember
         | to add "display:none", and that it gives the structure more
         | semantic meaning. If I look at your code and see
         | "display:none", I don't know why you've chosen to hide it. If
         | it's wrapped in a <template> element, I instantly know why it's
         | not being displayed as I now have an idea of how it's going to
         | be used.
        
       | Gualdrapo wrote:
       | I'm redoing from scratch my portfolio using plain JavaScript and
       | <template>s for most stuff, pulling everything from a JSON as a
       | pseudo database. I think for this kind of uses <template> 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 <template>s for what would be a single block
       | code.
        
       | twism wrote:
       | Man ... I would have been thrown off a cliff if I did this in the
       | 2000s
        
       | geuis wrote:
       | Can't this be done more easily / programmatically via
       | createDocumentFragment?
       | 
       | https://developer.mozilla.org/en-US/docs/Web/API/Document/cr...
        
       | asadlionpk wrote:
       | I wrote apps this way before React came along. I hated
       | inserting/updating values by hand with no binding.
        
       | verisimilidude wrote:
       | The <template> tag really shines when used alongside <slot> and
       | the Shadow DOM.
       | 
       | But I really wish there were an HTML-native way to load
       | <template> from separate files, the same way we do with CSS and
       | JS. Not a show-stopper, but it'd be very nice to have.
        
       ___________________________________________________________________
       (page generated 2022-10-04 23:00 UTC)