4 ms·
Can you recommend examples and tutorials of happy <template> usage, showing advantages over building values for innerHTML etc. as text from strings and template
by HelloNurse 1y ago
Can you recommend examples and tutorials of happy <template> usage, showing advantages over building values for innerHTML etc. as text from strings and template string literals?
- palmfacehn 1y agoCanonical reference for me: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- HelloNurse 1y agoThis MDN page is where I first discovered the <template> element, and I wasn't very impressed: verbosely operating on one textContent at a time, using ordinal indices into very untyped querySelectorAll results, apparently gratuitous complications with document fragments and shadow DOM.
- palmfacehn 1y agoVerbosity never concerned me. Readability, maintenance, page weight and separation of concerns does. Typically I do not find myself using querySelectorAll within the context of a template element. When I do I am usually applying changes universally to all of the matched children within the element. The CSS class of the element reflects these things semantically. I find this highly readable. It also resolves most concerns around the type of the element. Of course in Vanilla JS, types are a mess. Even Microsoft's finest duct tape script doesn't fully resolve these issues. Overall I find Vanilla JS and browser APIs to be a lesser evil than the build systems, package managers and indirection of the React/Next.js approaches. After all, these compiled environments and their libraries will boil down to Vanilla JS when deployed in the browser.