Create your own custom HTML tags/component...TODAY

Re:Create your own custom HTML tags/component...TODAY by gkoberger on Tuesday May 01, 2012 @08:35PM (#3917043)

This is actually pretty useful. Basically, it lets you do something like this:

    document.createElement('slider')

Or just write it in HTML like this:

    <slider></slider>

And as soon as the page is about to render it, the script intercepts it and turns it into something like this (with styles, events, etc):

    <div class="slider"><div class="slider-knob">O</div></div>

You could write a jQuery plugin that does this, however you'd have to initialize it every time you added the element into the page.

Kind of like a DIY shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

[ Parent | on HN ]

Re:Create your own custom HTML tags/component...TODAY by dandonkulous on Tuesday May 01, 2012 @10:29PM (#3917362)

A couple quick, important clarifications:

The parse does not turn the custom tags into divs, there is no need to do that. These are fully capable, valid tags and exist in the source just the way you write them: <moz:sometag></moz:sometag>. Check out the demo linked to in the repo and you'll see ;)

Also, the way the code works is even a bit better than you described in the dynamic creation case. Let's take your example:

    var slider = document.createElement('slider');

you would actually receive a _fully inflated_ element that is already event-bound when it is returned out of document.createElement, pretty sweet right? The innerHTML value of slider would literally read:

    "<moz:sliderknob></moz:sliderknob>"

[ Parent | on HN ]