The hyperHTML's template literal parser, used to handle all repeated updates per each attribute or node.
- CDN as global utility, via https://unpkg.com/domtagger
- ESM via
import domtagger from 'domtagger' - CJS via
const domtagger = require('domtagger')
The tagger accepts a configuration object with mandatory methods that should return a function to invoke per each update.
Optionally, the object could have a type property, as either html or svg string, and a transform method that must return some string as content, after receiving the markup that is going to be used.
varhtml=domtagger({// can be html or svgtype: 'html',// how to handle attributes// Note: this callback is simplified for example purpose.// The node is the attribute ownerattribute: function(node,name,attribute){returnfunction(value){vartype=typeofvalue;if(type==='boolean'||type==='function')node[name]=value;elseif(value==null)node.removeAttribute(name);elsenode.setAttribute(name,value);}},// how to handle generic content// Note: this callback is simplified for example purpose.// The comment node is the hole placeholder// use domdiff or other techniques to handle nodesany: function(comment,childNodes){varparentNode=comment.parentNode;returnfunction(html){parentNode.innerHTML=html;};},// how to handle cases where content// can only be some text// The node is one that can only have texttext: function(node){returnfunction(textContent){node.textContent=textContent;};},// OPTIONAL// a man in the middle for the output// The html string is what will be used to generate the content// this is always invoked after sanitizing the template partstransform: function(html){// it must return the eventually transformed htmlreturnhtml;},// for adventurous 3rd parts libraries only:// previously internally known as `sanitize`,// it will run before transform and it must return a *string*// that contains domconstants.UID/UIDC in the right place// or the whole library will breakconvert: function(template){// see domsanitizer logic// https://github.com/WebReflection/domsanitizer/blob/master/esm/index.js// or see a possible wrap solution/hint/workaround// https://github.com/WebReflection/domtagger/issues/17#issuecomment-526151473returntemplate.join(domconstants.UIDC).replace(sani,tize);}});document.body.appendChild(render({onclick: function(e){alert(e.currentTarget.outerHTML);},html: 'Hello <strong>domtagger</strong>!',text: "isn't this cool?"}));// render examplefunctionrender(model){returnhtml`<divonclick=${model.onclick}><!--/* html is sanitized as text automatically */--><div>${model.html}</div><!--👻 textarea can use value=... or its content --><textarea>${model.text}</textarea></div> `;}If you'd like to create a dev only comment that will be removed at runtime once parsed, you can either start the comment with a ghost emoji 👻 or use /* and */ right at the boundaries of the comment.
<!--👻 dev only --><!--/* also dev only */--><!-- any other regular comment -->